document.body.scrollTop Firefox restituisce 0: SOLO JS

Qualche alternativa in puro javascript?

I seguenti lavori in opera, cromo e safari. Non ho ancora provato su explorer:

http://monkey-me.herokuapp.com

https://github.com/coolcatDev/monkey-me-heroku/blob/master/static/js/myscripts.js

Al caricamento della pagina dovrebbe scorrere verso il basso per div ‘.content’:

var destiny = document.getElementsByClassName('content'); var destinyY = destiny[0].offsetTop; scrollTo(document.body, destinyY, 200); function scrollTo(element, to, duration) { if (duration <= 0) return; var difference = to - element.scrollTop; var perTick = difference / duration * 2; setTimeout(function() { element.scrollTop = element.scrollTop + perTick; scrollTo(element, to, duration - 2); }, 10); }; 

Prova a usare questo: document.documentElement.scrollTop . Se sono corretto, document.body.scrollTop è deprecato.

Aggiornare

Sembra che Chrome non giochi con la risposta, per un uso sicuro come suggerito da @Nikolai Mavrenkov nei commenti:

window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0

Ora tutti i browser dovrebbero essere coperti.

Invece di usare le condizioni IF , c’è modo più semplice per ottenere risultati corretti usando qualcosa come questa espressione logica.

 var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop; 

Entrambe le parti restituiscono zero per impostazione predefinita, quindi quando lo scorrimento è in posizione zero, ciò restituirà zero come previsto.

 bodyScrollTop = 0 || 0 = 0 

Alla pagina-scorrere una di quelle parti restituirà zero e un altro restituirà un numero maggiore di zero. Il valore azzerato viene valutato su falso e quindi OR logico || prenderà un altro valore come risultato (ad esempio, il tuo scrollTop previsto è 300 ).

I browser simili a Firefox vedranno questa espressione come

 bodyScrollTop = 300 || 0 = 300 

e il resto dei browser vedono

 bodyScrollTop = 0 || 300 = 300 

che di nuovo dà lo stesso risultato corretto.

In realtà, si tratta di something || nothing = something something || nothing = something 🙂

Lo standard è document.documentElement e viene utilizzato da FF e IE.

WebKit utilizza document.body e non è stato in grado di utilizzare lo standard a causa di lamentele relative alla compatibilità con le versioni precedenti se sono stati modificati nello standard, questo post lo spiega correttamente

https://miketaylr.com/posts/2014/11/document-body-scrolltop.html

C’è una nuova proprietà sul documento che WebKit ora supporta

https://developer.mozilla.org/en/docs/Web/API/document/scrollingElement

quindi questo ti porterà all’elemento giusto

 var scrollingElement = document.scrollingElement || document.documentElement; scrollingElement.scrollTop = 100; 

e c’è anche un polyfill

https://github.com/mathiasbynens/document.scrollingElement