1

对不起，我的英语不好。英语不是我的母语，我有阅读障碍。

解释我的问题

我一直在尝试创建一个自动从锚点滚动到锚点的菜单。 这是一个简短的 gif，显示了应用程序的工作原理。 但是应用程序必须对用户滚动做出反应，而不是按下那些导航按钮。

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

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

  1. 首先，滚动动画会触发滚动事件，滚动后，应用程序就会变得疯狂。

  2. 当您滚动时，您不只是滚动一步。每一步都算作一个姿势。我不知道如何让它工作，所以如果我向下滚动它会先完成滚动动画，然后它会再次监听新的滚动事件。

我的代码

按钮代码

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 observable 一起工作。准确地说是一个 fromEvent Observable。这适用于 google chrome、edge 和 Opera。但是，Internet Explorer 和 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]

和谷歌浏览器（编辑仍然有效）：

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

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

先谢谢了。

4

0 回答 0