suavizar - scroll to vanilla javascript

Cómo determinar si "html" o "body" se desplaza por la ventana

Question

El siguiente código se usa para encontrar el elemento que se puede desplazar (body o html) a través de javascript.

 var scrollElement = (function (tags) {
var el, $el, init;
// iterate through the tags...
while (el = tags.pop()) {
$el = $(el);
// if the scrollTop value is already > 0 then this element will work
if ( $el.scrollTop() > 0){
return $el;
}
// if scrollTop is 0 try to scroll.
else if($el.scrollTop( 1 ).scrollTop() > 0) {
// if that worked reset the scroll top and return the element
return $el.scrollTop(0);
}
}
return $();
} (["html", "body"]));
// do stuff with scrollElement...like:
// scrollElement.animate({"scrollTop":target.offset().top},1000);

Este código funciona perfectamente cuando la altura del document es mayor que la altura de la window . Sin embargo, cuando la altura del document es igual o menor que la window el método anterior no funcionará porque scrollTop() siempre será igual a 0. Esto se convierte en un problema si el DOM se actualiza y la altura del document crece más allá la altura de la window después de que se ejecuta el código

Además, en general, no espero hasta el documento. Listo para configurar mis controladores de JavaScript (esto generalmente funciona). Podría agregar un div alto al body temporalmente para forzar el método anterior, pero eso requeriría que el documento esté listo en IE (no se puede agregar un nodo al elemento del cuerpo antes de que se cierre la etiqueta). Para obtener más información sobre el tema del document.ready "antipatrón", lea esto .

Entonces, me encantaría encontrar una solución que encuentre el elemento desplazable incluso cuando el document sea ​​corto. ¿Algunas ideas?

Answer 1

Han pasado unos 5 años desde que pregunté esto ... ¡pero mejor tarde que nunca!

document.scrollingElement ahora es parte de la especificación de CSSOM, pero tiene poca o ninguna implementación de navegador en el mundo real en este momento (abril de 2015). Sin embargo, aún puedes encontrar el elemento ...

Mediante el uso de este polyfill por Mathias Bynens y Diego Perini .

Que implementa esta solución básica por Diego Perini (El polifill anterior es mejor y cumple con CSSOM, por lo que probablemente deberías usar eso.):

/*
* How to detect which element is the scrolling element in charge of scrolling the viewport:
*
* - in Quirks mode the scrolling element is the "body"
* - in Standard mode the scrolling element is the "documentElement"
*
* webkit based browsers always use the "body" element, disrespectful of the specifications:
*
* http://dev.w3.org/csswg/cssom-view/#dom-element-scrolltop
*
* This feature detection helper allow cross-browser scroll operations on the viewport,
* it will guess which element to use in each browser both in Quirk and Standard modes.
* See how this can be used in a "smooth scroll to anchors references" example here:
*
* https://dl.dropboxusercontent.com/u/598365/scrollTo/scrollTo.html
*
* It is just a fix for possible differences between browsers versions (currently any Webkit).
* In case the Webkit bug get fixed someday, it will just work if they follow the specs. Win !
*
* Author: Diego Perini
* Updated: 2014/09/18
* License: MIT
*
*/
function getScrollingElement() {
var d = document;
return d.documentElement.scrollHeight > d.body.scrollHeight &&
d.compatMode.indexOf(''CSS1'') == 0 ?
d.documentElement :
d.body;
}

- getScrollingElement.js