(Angular2) Controlling scroll event input for SmoothScrolling to anchorpoints

Question

I've been trying to create a menu that automatically scrolls from anchor to anchor. Here a short gif that shows how the application works. But the application must react to the user scrolling and not be pressing those navigation buttons.

This menu is generated by a ngFor and every anchor points location can be calculated. The buttons work through an API called "smooth scroll polyfill" every time they get pressed they remove or add from the Pos variable that I use to determine the app's location and it uses the window.scroll function from the API and that works perfectly.

But when I try to make it work with a scrolling event some challenges pop up.

First of all the scrolling animation triggers the scrolling event and after scrolling, the application just go's wild.
When you scroll you don't just scroll one step. And every step is counted as one pos down. I don't know how to make it work so if I scroll down it finishes the scrolling animation first and then it will listen again for new scrolling events.

My code

ButtonCode

Pos = 1; //Is position of application
    
      ScrollOnButtonPress(UpOrDown:boolean) {
        if(UpOrDown) {
          if (this.Pos != 0) {
            this.Pos--;
            window.scroll({ top: this.positionfromTop(this.Pos, false), left: 0, behavior: 'smooth' }); 
   //this.positionfromTop(pos, mode) is here used to calculate the location that we have to go to.
          }
        } else {
          if (this.Pos != this.Alphabet.length-2 && document.body.scrollHeight >= window.scrollY) {
            this.Pos++;
            window.scroll({ top: this.positionfromTop(this.Pos, false), left: 0, behavior: 'smooth' });
          }
        }
      }

This is the code that I used to make the application work with scroll events. I don't know what to put here to make the application work right.

  scrollY_OLD:number;
  
  scrollUpOrDown(event) {
    console.log("ScrollEvent triggered");

    if(window.scrollY > this.scrollY_OLD) { //ScrollDown
      this.ScrollOnButtonPress(true);
    } else if (window.scrollY < this.scrollY_OLD) { //ScrollUp
      this.ScrollOnButtonPress(false);
    } else {
      this.scrollY_OLD = window.scrollY;
    }
  }

And finally the HTML. On the second line at the end of the section tag is the scroll check part placed (window:scroll)="...

<div class="">
<section *ngFor="let Name of this.NameList ; let i = index;" class="docScroller Everything" (window:scroll)="positionfromTopEventHandler(); scrollUpOrDown(event)">
  <div class="ButtonDown"></div>
  <ng-container *ngIf="Name.length != 1">
    <div class="DisplayName">
      <div class="innerContent">
        <img class="imgStyle" height="180px" src="https://bytesizemoments.com/wp-content/uploads/2014/04/placeholder.png">
        <br><div class="titleInnerContent">{{Name}}</div>
        <p>Some description with some text that would be interesting and usefull to know...</p>
      </div>
    </div>
  </ng-container>
  <ng-container *ngIf="Name.length == 1" >
    <div class="Divider" id="{{Name}}" [style.top.px]="positionfromTop(i, true)" (click)="scrollToNextOne()">
      {{Name}}
    </div>
    <div class="Space"></div>
  </ng-container>
</section>
<div (click)="ScrollOnButtonPress(false)"><img class="ArrowDown" src="ArrowDown.png" height="75" width="75" /></div>
<div (click)="ScrollOnButtonPress(true)"><img class="ArrowUp" src="ArrowUp.png" height="75" width="75"/></div>
<div class="PosShower"><a href="#" (click)="Pos=0"><h1>Pos={{Pos}}</h1></a></div>
</div>

I have made it work with an RXJS observable. To be precise a fromEvent Observable. this worked for google chrome, edge and Opera. However, Internet Explorer and Firefox don't want to work. Then the following thing popped up in all browsers.

FireFox:

The resource from “http://localhost:4200/polyfill.js” was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).[Learn More]  localhost:4200
The resource from “http://localhost:4200/scrollsnap-polyfill.js” was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).[Learn More]  localhost:4200
The resource from “http://localhost:4200/scrollsnap-polyfill.js” was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).[Learn More]

and google chrome(dit still work):

localhost/:14 GET http://localhost:4200/polyfill.js 
localhost/:15 GET http://localhost:4200/scrollsnap-polyfill.js

I think it is that the polyfill.js and the scrollsnap-polyfill.js aren't being compiled from ts to js but I'm probably wrong.

(Angular2) Controlling scroll event input for SmoothScrolling to anchorpoints

My code

0 Answers0