Angular 使用鼠标滚轮平滑滚动整页

我用鼠标滚轮平滑地滚动整页

但是scrollIntoView函数在@HostListener（'wheel'，['event']）内部不起作用。

在app.component.html文件中：

<div #page *ngFor="let page of [0,1,2,3,4]" [class]="'vh-100 p-3 bg-' + (page + 1)">
  <h3 class="text-white">Page {{page + 1}}</h3>
  <div class="page-content">
    <h3>Lorem Ipsum</h3>
    <p>beatae esse velit laudantium nam eligendi possimus</p>
  </div>
</div>

<div class="nav">
  <button #prev class="btn btn-sm btn-light me-1" (click)="clickPrev()">prev</button>
  <button #next class="btn btn-sm btn-light" (click)="clickNext()">next</button>
</div>

第{{Page+1}页
乱数假文
贝塔·埃塞韦利特·劳丹蒂姆·纳姆·埃利根迪·波西姆斯

上
下一个

在app.component.ts文件中：

  @ViewChildren('page') pages: QueryList<ElementRef>;
  @ViewChild('prev') prev: ElementRef;
  @ViewChild('next') next: ElementRef;

  idlePeriod = 100;
  animationDuration = 1000;
  lastAnimation = 0;
  index = 0;

  togglePageContent(index, state) {
    if (state === 'show') {
      this.pages.toArray()[index].nativeElement.querySelector('.page-content')
        .classList.add('show');
    } else {
      this.pages.toArray()[index].nativeElement.querySelector('.page-content')
        .classList.remove('show');
    }
  }

  ngAfterViewInit() {
    this.togglePageContent(0, 'show');
  }

  clickPrev() {
    if (this.index < 1) return;
    this.togglePageContent(this.index, 'hide');
    this.index--;
    this.pages.forEach((page, i) => {
      if (i === this.index) {
        this.togglePageContent(i, 'show');
        page.nativeElement.scrollIntoView({ behavior: 'smooth' });
      }
    });
  }

  clickNext() {
    if (this.index > 3) return;
    this.togglePageContent(this.index, 'hide');
    this.index++;
    this.pages.forEach((page, i) => {
      if (i === this.index) {
        this.togglePageContent(i, 'show');
        page.nativeElement.scrollIntoView({ behavior: 'smooth' });
      }
    });
  }

  @HostListener('wheel', ['$event'])
  onMouseWheel(event) {
    var delta = 0;
    if (event['wheelDelta']) {
      delta = event['wheelDelta'];
    }
    var timeNow = new Date().getTime();
    if ( timeNow - this.lastAnimation < this.idlePeriod + this.animationDuration ) {
      event.preventDefault();
      return;
    }

    if (delta < 0) {
      this.next.nativeElement.click();
      // this.pages.toArray()[this.index + 1].nativeElement.scrollIntoView();
    } else {
      this.prev.nativeElement.click();
      // this.pages.toArray()[this.index - 1].nativeElement.scrollIntoView();
    }

    this.lastAnimation = timeNow;

@ViewChildren（'page'）页面：QueryList；
@ViewChild（“prev”）prev:ElementRef；
@ViewChild（“next”）next:ElementRef；
idlePeriod=100；
动画持续时间=1000；
lastAnimation=0；
指数=0；
切换页面内容（索引、状态）{
如果（状态=='show'）{
this.pages.toArray（）[index].nativeElement.querySelector（“.page content”）
.classList.add（'show'）；
}否则{
this.pages.toArray（）[index].nativeElement.querySelector（“.page content”）
.classList.remove（'show'）；
}
}
ngAfterViewInit（）{
this.togglePageContent（0，'show'）；
}
单击上一页（）{
如果（该指数<1）返回；
this.togglePageContent（this.index，'hide'）；
本索引--；
this.pages.forEach（（第页，i）=>{
如果（i==this.index）{
this.togglePageContent（i，‘show’）；
page.nativeElement.scrollIntoView（{behavior:'smooth'}）；
}
});
}
单击下一步（）{
如果（this.index>3）返回；
this.togglePageContent（this.index，'hide'）；
这个.index++；
this.pages.forEach（（第页，i）=>{
如果（i==this.index）{
this.togglePageContent（i，‘show’）；
page.nativeElement.scrollIntoView（{behavior:'smooth'}）；
}
});
}
@HostListener（'wheel'，['$event']））
onMouseWheel（事件）{
var-delta=0；
if（事件['wheelDelta']）{
增量=事件['wheelDelta']；
}
var timeNow=new Date（）.getTime（）；
if（timeNow-this.lastAnimation

我有另一个有点像javascript的例子，它与document.addEventListener（'wheel'，（event:wheeleevent）=>{}）一起工作。

---

滚动视图如何在@HostListener（'wheel'，['event']）内部工作？

HostListener工作正常。 唯一造成这种笨拙滚动效果的是css

• 第一件事是用100vh将按钮和内容包装在父div中

• 第二件事是使内容位置相对于其原始位置

...
...

如果在“家长”标签之外，我有额外的内容。有没有办法防止发生此错误？您可以调整家长高度，并在家长旁边放置其他内容。更新的stackblitz，您可以查看

<div class="vh-100 overflow-hidden">
  <div #page *ngFor="let page of [0,1,2,3,4]" [class]="'vh-100 p-3 position-relative bg-' + (page + 1)">
    ...
  </div>

  <div class="nav">
    ...
  </div>
</div>