防止谷歌地图信息窗口滚动到自己的窗口之外答案

【问题标题】：Prevent google map infowindow to scroll outside of own window防止谷歌地图信息窗口滚动到自己的窗口之外
【发布时间】：2015-12-06 06:13:05
【问题描述】：

我一直在尝试防止在信息窗口内滚动时滚动网页。我的信息窗口内部有一个启用滚动的 div，一旦它到达 div 的底部，它就会滚动网页。

我知道如何通过更改“溢出”css 样式来使用 jQuery 为普通 div 做到这一点，如下所示。

$('.classOfMyDiv').on('mouseover', function(event) {
     $('body').css('overflow', 'hidden');
}
$('.classOfMyDiv').on('mouseout', function(event) {
     $('body').css('overflow', '');
}

但在信息窗口中使用 div 时它似乎不起作用。有人设法做到了吗？我还尝试使用谷歌侦听器来获取鼠标悬停和鼠标悬停事件的信息窗口，但也没有运气。

【问题讨论】：

标签： jquery google-maps-api-3 infowindow custom-scrolling

【解决方案1】：

您可以在 InfoWindow 和 Map 上使用 Google 地图事件侦听器来禁用正文滚动。

var infowindow = new google.maps.InfoWindow();

// This event is fired when the <div> containing the InfoWindow's content is attached to the DOM.
google.maps.event.addListener(infowindow, 'domready', function () {

    toggleBodyOverflow('hidden');
});

// This event is fired when the close button was clicked.
google.maps.event.addListener(infowindow, 'closeclick', function () {

    toggleBodyOverflow('auto');
});

// This event is fired when the user clicks on the map (and therefore closes the InfoWindow).
google.maps.event.addListener(map, 'click', function () {

    toggleBodyOverflow('auto');
});

为什么要映射click 事件监听器？因为有两种方法可以关闭信息窗口：使用关闭按钮——或者——点击地图。由于 InfoWindow 没有正确的 close 事件，因此您需要同时使用两者。

以及切换正文溢出的功能：

function toggleBodyOverflow(param) {
    $('body').css({
        overflow: param
    });
}

JSFiddle demo

【讨论】：

它对你有用吗？就像我说的那样，我已经尝试过使用侦听器，但没有运气。
是的，它正在工作。你试过那个代码吗？我不知道你做错了什么，因为你没有发布你的代码。请参阅我的答案中添加的演示。
顺便说一句。您提到了 用于鼠标悬停和鼠标悬停事件的信息窗口的谷歌侦听器，但信息窗口确实没有有这样的事件：developers.google.com/maps/documentation/javascript/…
我的错。你的小提琴在我的 win7 上不起作用 - Firefox 但我会在家里再试一次 - 我在工作站上。但是，我想一些不会像我想的那样起作用的事实是，如果您单击信息窗口然后想要滚动页面，则应该允许它。在您的示例中，它不起作用。这就是我尝试鼠标悬停事件的原因（不存在 - 谢谢）