javascript - documentelement - document.body.scrollTop Firefox devuelve 0: SOLO JS
set scrolltop javascript (3)
¿Alguna alternativa en javascript puro?
Los siguientes trabajos en ópera, cromo y safari. Todavía no he probado en el explorador:
http://monkey-me.herokuapp.com
https://github.com/coolcatDev/monkey-me-heroku/blob/master/static/js/myscripts.js
En la carga de la página, debe desplazarse hacia abajo hasta 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);
};
El estándar es
document.documentElement
y FF e IE lo utilizan.
WebKit usa
document.body
y no pudo usar el estándar debido a quejas sobre compatibilidad con versiones anteriores si cambiaran al estándar, esta publicación lo explica muy bien
https://miketaylr.com/posts/2014/11/document-body-scrolltop.html
Hay una nueva propiedad en el documento que ahora admite WebKit
https://developer.mozilla.org/en/docs/Web/API/document/scrollingElement
así que esto te llevará al elemento correcto
var scrollingElement = document.scrollingElement || document.documentElement;
scrollingElement.scrollTop = 100;
y también hay un polyfill
En lugar de usar condiciones IF , hay una manera más fácil de obtener un resultado adecuado usando algo como esta expresión lógica.
var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
Ambas partes devuelven cero de forma predeterminada, por lo que cuando el desplazamiento está en la posición cero, devolverá cero como se esperaba.
bodyScrollTop = 0 || 0 = 0
En el desplazamiento de página, una de esas partes devolverá cero y otra devolverá un número mayor que cero.
El valor puesto a cero se evalúa como falso y luego lógico
OR
||
tomará otro valor como resultado (por ejemplo, su
scrollTop
esperado es
300
).
Los navegadores similares a Firefox verán esta expresión como
bodyScrollTop = 300 || 0 = 300
y el resto de los navegadores ven
bodyScrollTop = 0 || 300 = 300
que nuevamente da el mismo y correcto resultado.
De hecho, se trata de
something || nothing = something
something || nothing = something
:)
Intente usar esto:
document.documentElement.scrollTop
.
Si estoy en lo cierto,
document.body.scrollTop
está en desuso.
Actualizar
Parece que Chrome no cumple con la respuesta, para ser seguro de usar como lo sugiere @Nikolai Mavrenkov en los comentarios:
window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
Ahora todos los navegadores deberían estar cubiertos.