I want to listen scroll event and handler them by two function for two scroll.

One need a throttleTime() to save resource and the other cannot use throttleTime() because it need trigger immediately and it doesn't cast too much.

Now I add two fromEvent to handle them but question is they will both be fired if scroll event is triggered.

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

In my ponent those two function won't happen at the same time, so what should I do to make it only trigger one function and prevent from the other being executed?

I want to listen scroll event and handler them by two function for two scroll.

One need a throttleTime() to save resource and the other cannot use throttleTime() because it need trigger immediately and it doesn't cast too much.

Now I add two fromEvent to handle them but question is they will both be fired if scroll event is triggered.

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

In my ponent those two function won't happen at the same time, so what should I do to make it only trigger one function and prevent from the other being executed?

• javascript
• typescript
• dom-events
• rxjs6

Share Follow edited Dec 13, 2020 at 22:17 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Nov 12, 2018 at 9:13 LoicLoic 18411 gold badge22 silver badges1414 bronze badges 1

• Put them in the same event handler, call 2 functions based on the condition whether there was a vertical scroll or a horizontal one. – Dennis Lukas Commented Nov 12, 2018 at 9:56

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Create your single function but store the previous X and Y scroll positions so you can see if they've changed between calls:

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./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>