Poiché JavaScript viene eseguito nello stesso thread come l'interfaccia utente, un callback evento di scorrimento può bloccare l'interfaccia utente -la trama e quindi causare lag. Devi limitare il listener degli eventi di scroll perché alcuni browser ne licenziano molti. Soprattutto se sei su OS X con un dispositivo di scorrimento analogico. Poiché esegui molti calcoli di altezza nell'ascoltatore, it will trigger a reflow (molto costoso) per ogni evento di scorrimento che viene generato.
Per limitare l'ascoltatore, è necessario impedire ogni volta che il listener si attiva. Di solito si attende fino a quando il browser non attiva un evento per x millisecondi o ha un tempo minimo tra la chiamata alla richiamata. Prova a regolare il valore per vedere l'effetto. Anche 0 millisecondi possono essere d'aiuto, poiché ritardano l'esecuzione della richiamata fino a quando il browser non ha tempo (di solito 5-40 ms).
È anche buona norma attivare una classe per passare da uno stato all'altro (posizione statica e fissa) anziché codificarlo manualmente in JavaScript. Poi hai una separazione più chiara dei problemi e avoid potential extra redraws by mistake (vedi la sezione "I browser sono intelligenti").(example on jsfiddle)
Attendere una pausa di 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));
};
attendere almeno x ms (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 Waypoint Visto che siete già usando jQuery, darei un'occhiata alloPluginche ha una soluzione semplice ed elegante al tuo problema. Basta definire una richiamata quando l'utente scorre verso un determinato waypoint.
Esempio: (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
});
});
direi che è qualcosa più a che fare con il modo in Firefox ha scorrimento facilitando e come fuochi Gecko/Rhino/interpreta l'evento di scorrimento in modo diverso da altri browser di qualsiasi altra cosa, in modo da esso probabilmente è qualcosa di difficile da risolvere ancora usando l'approccio listener 'scroll', e non vedo nessun altro approccio possibile, ma best of luck man. –