2

情報ウィンドウ内をスクロールするときに Web ページがスクロールされないようにしようとしています。私の情報ウィンドウには、内部にスクロール可能な div があり、div の下部に到達すると Web ページがスクロールされます。

以下に示すように、「オーバーフロー」CSSスタイルを変更することにより、jQueryを使用して通常のdivでそれを行う方法を知っています。

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

しかし、情報ウィンドウ内で div を使用すると機能しないようです。なんとかできた人いますか？また、mouseover および mouseout イベントの情報ウィンドウに Google リスナーを使用しようとしましたが、うまくいきませんでした。

4

1 に答える 1

0

InfoWindow とマップの両方で 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 を閉じる方法は 2 つあります。閉じるボタンを使用するか、マップをクリックします。InfoWindow には適切なcloseイベントがないため、両方を使用する必要があります。

そして、本体のオーバーフローを切り替える関数:

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

JSFiddle demo

于 2015-09-10T09:47:34.270 に答える