javascript - img - Detectar dirección de desplazamiento

title html attribute

Question

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 poner un botón "arriba", pero me gustaría evitarlo si pudiera.

Acabo de intentar usar este código pero no funcionó:

if document.body.scrollTop <= 0 {
    alert ("scrolling down")
} else {
    alert ("scrolling up")
}

Answer 1

1. Inicializar un valor antiguo
2. Obtenga el nuevo Valor escuchando el evento
3. Resta los dos
4. Concluir del resultado
5. Actualice oldValue con newValue

// Inicialización

let oldValue = 0;

// Escuchando el evento

window.addEventListener(''scroll'', function(e){

    // Get the new Value
    newValue = window.pageYOffset;

    //Subtract the two and conclude
    if(oldValue - newValue < 0){
        console.log("Up");
    } else if(oldValue - newValue > 0){
        console.log("Down");
    }

    // Update the old value
    oldValue = newValue;
});

Answer 2

Esta es una adición a lo que ha respondido prateek. Parece que hay un error en el código en IE, así que decidí modificarlo un poco, nada lujoso (solo otra condición)

$(''document'').ready(function() {
var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       console.log("down")
   }
   else if(st == lastScrollTop)
   {
     //do nothing 
     //In IE this is an important condition because there seems to be some instances where the last scrollTop is equal to the new one
   }
   else {
      console.log("up")
   }
   lastScrollTop = st;
});});

Answer 3

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;
}

Answer 4

Personalmente uso este código para detectar la dirección de desplazamiento en javascript ... Solo tiene que definir una variable para almacenar el último valor de desplazamiento y luego usar esto si y de lo contrario

let lastscrollvalue;

function headeronscroll() {

    // document on which scroll event will occur
    var a = document.querySelector(''.refcontainer''); 

    if (lastscrollvalue == undefined) {

        lastscrollvalue = a.scrollTop;

        // sets lastscrollvalue
    } else if (a.scrollTop > lastscrollvalue) {

        // downscroll rules will be here
        lastscrollvalue = a.scrollTop;

    } else if (a.scrollTop < lastscrollvalue) {

        // upscroll rules will be here
        lastscrollvalue = a.scrollTop;

    }
}

Answer 5

Puede obtener la posición de la barra de desplazamiento usando document.documentElement.scrollTop . Y luego se trata simplemente de compararlo con la posición anterior.

Answer 6

Puedes intentar hacer esto.

function scrollDetect(){
  var lastScroll = 0;

  window.onscroll = function() {
      let currentScroll = document.documentElement.scrollTop || document.body.scrollTop; // Get Current Scroll Value

      if (currentScroll > 0 && lastScroll <= currentScroll){
        lastScroll = currentScroll;
        document.getElementById("scrollLoc").innerHTML = "Scrolling DOWN";
      }else{
        lastScroll = currentScroll;
        document.getElementById("scrollLoc").innerHTML = "Scrolling UP";
      }
  };
}


scrollDetect();

html,body{
  height:100%;
  width:100%;
  margin:0;
  padding:0;
}

.cont{
  height:100%;
  width:100%;
}

.item{
  margin:0;
  padding:0;
  height:100%;
  width:100%;
  background: #ffad33;
}

.red{
  background: red;
}

p{
  position:fixed;
  font-size:25px;
  top:5%;
  left:5%;
}

<div class="cont">
  <div class="item"></div>
  <div class="item red"></div>
  <p id="scrollLoc">0</p>
</div>

Answer 7

Se puede detectar almacenando el valor anterior de scrollTop y comparando el valor actual de scrollTop con él.

JS:

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);

Answer 8

Use esto para encontrar la dirección de desplazamiento. Esto es solo para encontrar la dirección del desplazamiento vertical. Admite todos los navegadores cruzados.

    var scrollableElement = document.getElementById(''scrollableElement'');

    scrollableElement.addEventListener(''wheel'', findScrollDirectionOtherBrowsers);

    function findScrollDirectionOtherBrowsers(event){
        var delta;

        if (event.wheelDelta){
            delta = event.wheelDelta;
        }else{
            delta = -1 * event.deltaY;
        }

        if (delta < 0){
            console.log("DOWN");
        }else if (delta > 0){
            console.log("UP");
        }

    }

Example