无法在移动设备上滚动谷歌地图弹出窗口答案

【问题标题】：Can't scroll Google Maps popup on mobile无法在移动设备上滚动谷歌地图弹出窗口
【发布时间】：2018-06-23 16:13:21
【问题描述】：

当用户点击地图上的标记时出现一个弹出窗口（我使用的是 Google Maps JavaScript API）。

HTML：

<div id="map"></div>
<div id="popup" class="popup-bubble-content">
    ... content inside
</div>

CSS：

.popup-bubble-content {
    z-index: 1000000;
    position: absolute;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

JavaScript：

var popupList = document.getElementById('popup');
... some processing code
popup = new Popup(latLng, popupList);
popup.setMap(map);

在移动设备上，您可以点击弹出窗口中的内容，但不能触摸滚动。在带有触控板或鼠标的 PC 上滚动效果很好，但触摸滚动不起作用。

我试过了……

这些都不适合我。

这是弹出窗口的picture。滚动条可见，但触摸滚动不起作用。

编辑：

我有了一个小小的发现。如果我在创建后附加弹出窗口说body 元素，它可以正常工作，但它没有正确定位。触摸滚动问题是由popup.setMap(map) 引起的，之后弹出框变成了一个MVCObject，并成为Google Maps API 创建的某个随机元素的子项。

我很确定这是一个错误，或者至少是一个意外功能。我正在提交错误报告。

【问题讨论】：

【解决方案1】：

我确定我之前在嵌入论坛时看到过这种情况，我会尝试将 overflow-y: auto; 更改为 overflow-y: touch; 并确保您选择内容的宽度和高度并在整个过程中重复它们。

【讨论】：