滚动页面闪烁效果

Question

页面在滚动时闪烁，在 Firefox 中正常，但在 chrome 中不正常。我尝试禁用 chrome 平滑滚动插件，但仍然无效。

Answer 1

如果您检查源代码并搜索 'scroll'，您会发现以下事件绑定（未缩小和美化）：

$window.bind('scroll').resize();

$(window).bind('mousewheel DOMMouseScroll', function(event) {
    if (/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) {
        var delta = event.originalEvent.wheelDelta;
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        };
        $("html").stop().animate({
            scrollTop: $("html").scrollTop() + (-delta * 1.7)
        }, 200, 'linear');
    }
});

滚动调整大小是一件奇怪的事情，但第二个绑定绝对是无稽之谈，并且是导致问题的原因：

每个微小的滚动动画都会被打断$("html").stop()
并被矛盾的滚动动画覆盖.animate({scrollTop: $("html").scrollTop() + (-delta * 1.7)})

在 commenting/deleting 此代码之前，只需从 chrome 控制台解除绑定即可检查：

jQuery(window).unbind('mousewheel DOMMouseScroll');

滚动页面闪烁效果

Page Flickering effect on scroll

javascript

php

scroll

drupal