Question

我添加了2个EventListener以控制滚动并使其在Chrome（特别是）上流畅且流畅，默认情况下会出现可怕的行为。

if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;

var time = 1300;
var distance = 270;

function wheel(event) {
    if (event.wheelDelta) delta = event.wheelDelta / 120;
    else if (event.detail) delta = -event.detail / 3;

    handle();
    if (event.preventDefault) event.preventDefault();
    event.returnValue = false;
}

function handle() {

    $('html, body').stop().animate({
        scrollTop: $(window).scrollTop() - (distance * delta)
    }, time);
}


$(document).keydown(function (e) {

    switch (e.which) {
        //up
        case 38:
            $('html, body').stop().animate({
                scrollTop: $(window).scrollTop() - distance
            }, time);
            break;

            //down
        case 40:
            $('html, body').stop().animate({
                scrollTop: $(window).scrollTop() + distance
            }, time);
            break;
    }
});

除了我需要添加Google Maps API v3地图外，一切都运行正常。它还有另一个EventListener，当鼠标悬停在地图上并使用鼠标滚轮时，它会放大和缩小。当鼠标悬停在地图上时，如何禁用我的脚本？这是我的页面链接（您可以看到行为），实时：http://www.rendezvousroma.it/new/contatti.php

Answer 1

（我不确定我是否正确理解了这个问题）

对我来说，当鼠标悬停在地图上时，你的脚本根本不起作用。当我在地图上使用鼠标滚轮时，地图将被缩放，但页面不会滚动（我猜这是所需的行为）

当您在地图上时，只有当前正在运行的动画的队列将滚动页面。如果这是您想要避免的，请观察地图的mouseover - 事件并停止动画：

  google.maps.event.addListener(map,'mouseover',function(e){
    $('html, body').stop();
  });

为防止页面在Firefox中滚动，请添加：

  google.maps.event.addDomListener(map.getDiv(),'DOMMouseScroll',function(e){
    e.stopPropagation();
  });

它应该防止事件冒泡到文档。

Answer 2

将它放在div：style="user-select: none; pointer-events: none;"

上

在悬停Google地图时禁用鼠标EventListener

2 个答案: