2

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

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

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

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

4

1 回答 1

0

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

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

于 2015-09-10T09:47:34.270 回答