جاوااسکریپت - چگونه به صورت جداگانه به رویداد اسکرول برای اسکرول افقی و عمودی گوش دهیم

میخواهم رویداد اسکرول را گوش دهم و با دو تابع برای دو اسکرول آنها را مدیریت کنم.

یکی به 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';
});

در کامپوننت من، این دو تابع همزمان اتفاق نمیافتند، پس چه کاری باید انجام دهم تا فقط یکی از توابع فعال شود و از اجرای دیگری جلوگیری شود؟

پاسخ شماره ۱

تابع تک خود را ایجاد کنید اما موقعیتهای پیمایش 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>