javascript - Chrome 和 IE 上的断断续续/滞后滚动事件

Question

我试图始终向用户显示内容 block ，即使他向下滚动页面也是如此。他还应该能够上下滚动内容 block 。这是一个精简版本的 fiddle ，向您展示我的意思:

http://jsfiddle.net/9ehfV/2/

人们应该注意到，当向下滚动时，直到到达红色 block 的底部时，它会将 block 固定在窗口上，而当向上滚动时，它会将其放回原处。

在 Firefox 中，人们可以上下滚动，并且上述固定/取消固定是难以察觉的 – 光滑如丝。

但是，一旦尝试在 Chrome 或 IE 中滚动，滚动事件似乎就会滞后，并且可以看到该 block “出现故障”一秒钟。这不是代码滞后——这似乎是浏览器的问题。

有什么办法可以解决这个问题吗？我已经无计可施了。

我很感激有关如何以不同方式实现相同效果的建议...谢谢

Answer 1

由于 JavaScript 与 UI 在同一线程中运行，因此滚动事件回调可能会阻塞 UI 线程，从而导致延迟。您需要限制滚动事件监听器，因为某些浏览器会触发大量滚动事件监听器。特别是如果您使用的是带有模拟滚动设备的 OS X。由于您在监听器中进行了大量高度计算，it will trigger a reflow (非常昂贵)对于触发的每个滚动事件。

要限制监听器，您必须防止监听器每次都触发。通常，您会等到浏览器在 x 毫秒内没有触发事件，或者在调用回调之间有一个最短时间。尝试调整该值看看效果。即使 0 毫秒也有帮助，因为它会延迟回调的执行，直到浏览器有时间(通常 5-40 毫秒)。

切换类以在状态(静态和固定位置)之间切换而不是在 JavaScript 中对其进行硬编码也是一个很好的做法。然后你就可以更清晰地分离关注点和 avoid potential extra redraws by mistake (请参阅“浏览器是智能的”部分)。 (example on jsfiddle)

等待 x 毫秒的暂停

// return a throttled function
function waitForPause(ms, callback) {
    var timer;

    return function() {
        var self = this, args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function() {
            callback.apply(self, args);
        }, ms);
    };
}

this.start = function() {
    // wrap around your callback
    $window.scroll( waitForPause( 30, self.worker ) );
};

等待至少 x 毫秒 ( jsfiddle )

function throttle(ms, callback) {
    var timer, lastCall=0;

    return function() {
        var now = new Date().getTime(),
            diff = now - lastCall;
        console.log(diff, now, lastCall);
        if (diff >= ms) {
            console.log("Call callback!");
            lastCall = now;
            callback.apply(this, arguments);
        }
    };
}

this.start = function() {
    // wrap around your callback
    $window.scroll(throttle(30, self.worker));
};

jQuery 路点由于您已经在使用 jQuery，我将查看 jQuery Waypoints插件可以为您的问题提供简单而优雅的解决方案。只需在用户滚动到某个路径点时定义回调即可。

示例:( jsfiddle )

$(document).ready(function() {
    // throttling is built in, just define ms
    $.waypoints.settings.scrollThrottle = 30;

    $('#content').waypoint(function(event, direction) {
        $(this).toggleClass('sticky', direction === "down");
        event.stopPropagation();
    }, {
        offset: 'bottom-in-view' // checkpoint at bottom of #content
    });
});