Событие Choppy/Laggy scroll в Chrome и IE

Ответ 1

Поскольку JavaScript работает в том же потоке, что и пользовательский интерфейс, обратный вызов события прокрутки может блокировать UI-поток и, следовательно, вызывать отставание. Вам нужно активировать прослушиватель событий прокрутки, потому что некоторые браузеры запускают много из них. Особенно, если вы используете OS X с аналоговым устройством прокрутки. Поскольку вы выполняете много расчётов высоты в своем слушателе, он вызывает перезапуск (очень дорого) для каждого запускаемого события прокрутки.

Чтобы дросселировать слушателя, вы должны препятствовать прослушиванию слушателя каждый раз. Обычно вы ждете, пока браузер не инициирует событие за миллисекунды или не будет иметь минимальное время между вызовом вашего обратного вызова. Попробуйте изменить значение, чтобы увидеть эффект. Даже 0 миллисекунд может помочь, так как это задерживает выполнение обратного вызова, пока браузер не получит время (обычно 5-40 мс).

Это также хорошая практика для переключения класса для переключения между состояниями (статическая и фиксированная позиция) вместо жесткого кодирования в JavaScript. Тогда у вас есть более четкое разделение проблем и избежать возможных дополнительных перерисовок по ошибке (см. Раздел "Браузеры умные" ). (пример на jsfiddle)

Подождите паузу в x ms

// 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
    });
});

Ответ 2

Вы пробовали какой-либо jquery-плагин для полосы прокрутки или используете анимацию для прокрутки вниз и вверх? Это заставит все браузеры работать одинаково (или закрывает их достаточно).

Что происходит, так это то, что firefox (по крайней мере, v12) имеет "родную" анимацию прокрутки. Когда вы перемещаетесь по любому URL-адресу, вы можете заметить плавность действий прокрутки, и это не реализовано в других браузерах, таких как Chrome или IE.

Примеры для плагинов скроллеров jquery:

• http://pagescroller.com/
• http://johnpolacek.github.com/scrollorama/
• http://slodive.com/web-development/jquery-scroll/

Ответ 3

почему вы не используете стиль = "position: fixed; top: 00px; right; 00px;"

тогда его всегда видно без изменчивости