滚动页面闪烁效果

Question

The page flickers on scroll, it works fine in Firefox but not in chrome. I tried disabling the chrome smooth scroll plugin but still doesn't work.

Answer 1

If you inspect the source code and search for 'scroll', you will find the following event bindings (unminified & beautified) :

$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');
    }
});

The resize on scroll is a weird thing, but the second binding is definitely nonsense and is the one causing the issue :

• every tiny scroll animation will be interrupted $("html").stop()
• and overridden with a contradictory scroll animation .animate({scrollTop: $("html").scrollTop() + (-delta * 1.7)})

Before commenting/deleting this code, just unbind from the chrome console to check :

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