地图滚轮修复

这篇博文 由史蒂夫·芬顿撰写，前几天出现在我的信息流中。 我以前从未听说过 HERE 地图，但显然它们可以像谷歌地图一样嵌入。 问题在于，您可以使用滚轮放大和缩小 HERE 地图。 因此，假设您正在向下滚动页面，您的光标（或手指）最终落在了 HERE 地图上，现在您无法继续向下滚动页面，因为滚动事件被地图捕获并变成了地图缩放。

史蒂夫的解决方案：在窗口上开始滚动事件时，在地图上放置一个“覆盖”<div>，并在短暂延迟后（滚动“停止”时）将其删除。 这个解决方案与我的想法一致，因为我过去不仅为此类嵌入地图编写过解决方案，而且今天在 CodePen 上也实现了类似的解决方案。 在 CodePen 上，您可以调整“预览”窗口的大小，这是一个包含您编写的代码的 <iframe>。 如果您拖动得太快，您的鼠标光标（或触摸事件）可能会触发可拖动元素的移动，可能会触发到 <iframe> 本身。 如果发生这种情况，<iframe> 将吞并事件，您尝试执行的调整大小操作将无法正常工作。 为了防止这种情况，我们在您拖动时在 <iframe> 的顶部放置一个“覆盖”的 <div>，并在您停止拖动时将其删除。

说到地图，它让我想起了布拉德·弗罗斯特在 2012 年记录的 自适应地图 的想法。 这个想法是，在小屏幕移动设备上嵌入地图并不是一个好主意。 空间狭窄，它们会减慢页面加载速度，而且，就像史蒂夫近十年后遇到的那样，它们会干扰用户滚动页面。 布拉德的解决方案是为小屏幕有条件地提供地图的图像（仍然可以使用 API 驱动），并附带一个“查看地图”链接，该链接将用户带到全屏地图体验，可能是在地图的原生应用程序中。 大屏幕仍然可以显示交互式地图，尽管我认为，对于任何技术债务较少的浏览器来说，使用链接到地图服务的图像可能是一个明智的模式。