Así que estoy tratando de usar JavaScript on scroll para llamar a una función. Pero quería saber si podía detectar la dirección del desplazamiento sin usar jQuery. Si no es así, ¿hay alguna solución?
Estaba pensando en simplemente poner un botón 'to top', pero me gustaría evitar eso si pudiera.
Ahora he intentado usar este código pero no funcionó:
if document.body.scrollTop <= 0 { alert ("scrolling down") } else { alert ("scrolling up") }Se puede detectar almacenando el valor scrollTop anterior y comparando el valor scrollTop actual con él.
JavaScript:
var lastScrollTop = 0; // element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element. element.addEventListener("scroll", function(){ // or window.addEventListener("scroll".... var st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426" if (st > lastScrollTop){ // downscroll code } else { // upscroll code } lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling }, false);Manera simple de capturar todos los eventos de desplazamiento (toque y rueda)
window.onscroll = function(e) { // print "false" if direction is down and "true" if up console.log(this.oldScroll > this.scrollY); this.oldScroll = this.scrollY; }Use esto para encontrar la dirección de desplazamiento. Esto es solo para encontrar la dirección del desplazamiento vertical. Soporta todos los navegadores cruzados.
var scrollableElement = document.body; //document.getElementById('scrollableElement'); scrollableElement.addEventListener('wheel', checkScrollDirection); function checkScrollDirection(event) { if (checkScrollDirectionIsUp(event)) { console.log('UP'); } else { console.log('Down'); } } function checkScrollDirectionIsUp(event) { if (event.wheelDelta) { return event.wheelDelta > 0; } return event.deltaY < 0; }