Как прослушать событие прокрутки для x прокрутки и y прокрутки по отдельности - PullRequest
Новая
       6

Как прослушать событие прокрутки для x прокрутки и y прокрутки по отдельности

0 голосов
/ 12 ноября 2018

Я хочу прослушать событие прокрутки и обработать их двумя функциями для двух прокрутки.

Один из них нуждается в throttleTime () для сохранения ресурса, а другой не может использовать throttleTime (), потому что он требует немедленного срабатывания и не использует слишком много.

Теперь я добавляю два fromEvent для их обработки, но вопрос в том, что оба они будут запущены, если будет запущено событие прокрутки. 

fromEvent(this.vscroll.nativeElement, 'scroll').pipe(throttleTime(200)).subscribe((e) => {
  if (this.timer) {
    clearTimeout(this.timer);
    this.timer = null;
    this.timer = setTimeout(() => {
      this.updateShow();
    }, 201);
  } else {
    this.timer = setTimeout(() => {
      this.updateShow();
    }, 201);
  }
});
fromEvent(this.vscroll.nativeElement, 'scroll').subscribe((e) => {
  (document.body.querySelector('#headerScroll') as HTMLElement).style.marginLeft = -this.vscroll.nativeElement.scrollLeft + 'px';
});

В моем компоненте эти две функции не будут выполняться одновременно, так что я должен сделать, чтобы он вызывал только одну функцию и предотвращал выполнение другой.

1 Ответ

0 голосов
/ 12 ноября 2018

Создайте свою отдельную функцию, но сохраните предыдущие позиции прокрутки X и Y, чтобы вы могли видеть, изменились ли они между вызовами: 

var scrollY = 0;
var scrollX = 0;
function onScroll(){
  var doc = document.documentElement;
  if(doc.scrollLeft !== scrollX) {
    scrollX = doc.scrollLeft;
    //Put behaviour for X scroll here
    $("p").text("X SCROLLED!");
  }
  if(doc.scrollTop !== scrollY) {
    scrollY = doc.scrollTop;
    //Put behaviour for Y scroll here
    $("p").text("Y SCROLLED!");
  }
}

window.addEventListener('scroll', onScroll);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:1000px; height:1000px; background-color:rebeccapurple; color:#FFF">
  <p style="position: fixed;"></p>
</div>
...