javascript - con - jquery innertext

Realice los cambios en "scrollLeft"/"scrollTop", no active el detector de eventos scroll

Question

Actualmente, mi programa se encuentra en un lugar donde ambos escuchan al usuario para desplazarse por un elemento determinado, pero también, a veces, se desplazan automáticamente este elemento por sí mismo. (No es un desplazamiento gradual, bonito, sino un salto instantáneo. Tiene sentido en contexto, lo juro).

¿Hay alguna forma de hacer que el evento de desplazamiento no se active si el desplazamiento se realizó configurando scrollLeft o scrollTop? Mi primer pensamiento fue un interruptor básico, como:

ignoreScrollEvents = true;
element.scrollLeft = x;
ignoreScrollEvents = false;

function onScroll() {
  if(ignoreScrollEvents) return false;
}

pero como los eventos no se activan de inmediato (oops, duhh), esa no es una solución viable. ¿Qué otro tipo de respuestas podría probar? También estoy usando jQuery, si eso ayuda algo.

Answer 1

¿El método genérico más fácil? Simplemente restablece la bandera en el controlador de eventos. Primero querrá verificar si realmente está cambiando el valor, ya que, de lo contrario, un evento no se activará. Como señala Rodrigo , una buena práctica aquí es tener en cuenta esto en las funciones llamadas "setter":

function setScrollLeft(x)
{
  if ( element.scrollLeft != x )
  {
    ignoreScrollEvents = true;
    element.scrollLeft = x;
  }
} 

...

function onScroll() 
{
  var ignore = ignoreScrollEvents;
  ignoreScrollEvents = false;

  if (ignore) return false;

  ...
}

Pero, dependiendo de sus necesidades, es posible que ya esté almacenando la posición de desplazamiento en algún lugar; Si es así, simplemente actualice y verifique eso como su bandera. Algo como:

element.scrollLeft = currentScrollLeft = x;

...

function onScroll() 
{
  // retrieve element, etc... 

  if (element.scrollLeft == currentScrollLeft) return false;

  ...
}

Answer 2

¿Qué tal un setter?

var _preventEvent = false; // set global flag 

function setScrollTop(amount) {
  _preventEvent = true; // set flag
  document.documentElement.scrollTop = amount * Math.random();
}

function setScrollLeft(amount) {
  _preventEvent = true; // set flag
  document.documentElement.scrollLeft = amount * Math.random();
}

// scroll event listener
window.onscroll = function() {
  console.clear();
  
  if (_preventEvent) {
    _preventEvent = false; // reset flag
    return;
  }
  
  console.log(''normal scroll'');
}

html{ height:500%; width:500%; } 
button{ position:fixed; }
button + button{ top:50px; }  

<button onclick=setScrollTop(1000)>Random scrollTop</button>
<button onclick=setScrollLeft(1000)>Random scrollLeft</button>

Answer 3

De acuerdo, mi solución final, a partir de Shog9 (no es mi código real, sino mi enfoque):

var oldScrollLeft = element.scrollLeft;
element.scrollLeft = x;
if(element.scrollLeft != oldScrollLeft) {
  ignoreScrollEvents = true;
}

function onScroll() {
  if(!ignoreScrollEvents) performGreatActions();
  ignoreScrollEvents = false;
}

La instrucción if solo establece el indicador de ignorar cuando el valor scrollLeft realmente cambia, por lo que los casos como el ajuste de 0 a 0 no establecen el indicador de forma incorrecta.

¡Gracias a todos!

Answer 4

Podrías verificar constantemente si la posición de desplazamiento cambia ...

Answer 5

Puedes intentar almacenar la parte superior de la compensación de tu elemento y compararla con el scrollTop cuando ingresas en onScroll:

function onScroll(){
    var scrollTop = (document.documentElement.scrollTop || document.body.scrollTop),
    offsetTop = $(''selector'').offset().top;
    if(offsetTop > scrollTop){
      //user has not scrolled to element so do auto scrolling
    }
}