解释我的问题

我一直在尝试创建一个自动从锚点滚动到锚点的菜单。 Here a short gif that shows how the application works. 但是应用程序必须对用户滚动做出反应而不是按下那些导航按钮。

此菜单由ngFor生成，可以计算每个锚点位置。这些按钮通过一个名为"smooth scroll polyfill"的API工作，每次按下它们都会从我用来确定应用程序位置的Pos变量中删除或添加它，它使用API中的window.scroll函数，并且工作正常。

但是当我试图让它与滚动事件一起工作时会出现一些挑战。

首先，滚动动画会触发滚动事件，滚动后，应用程序就会疯狂。
滚动时，不要只滚动一步。每一步都算作一个倒下。我不知道如何使它工作，所以如果我向下滚动它首先完成滚动动画然后它将再次收听新的滚动事件。

我的代码

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

这是我用来使应用程序使用滚动事件的以下代码。我不知道该放什么来使应用程序正常工作。

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

最后是HTML。在section标签末尾的第二行是放置滚动检查部分（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>

我希望我提供足够的信息。提前致谢。 ;）

编辑：

我使用RXJS可观察功能。准确地说是一个来自事件的观察者。这适用于谷歌浏览器，边缘和Opera。但是，Internet Explorer和Firefox不想工作。然后在所有浏览器中弹出以下内容。

的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]

和谷歌浏览器（dit仍在工作）：

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

我认为polyfill.js和scrollsnap-polyfill.js没有从ts编译为js，但我可能错了。

先谢谢。

Answer 1

https://github.com/Nolanus/ng2-page-scroll

我认为这个图书馆可以提供帮助。

（Angular2）控制SmoothScrolling到anchorpoints的滚动事件输入

解释我的问题

我的代码

1 个答案: