angular - 如何在页面上平滑滚动 - Angular 7

Question

它应该很简单，但从昨天开始，我试图在页面上平滑滚动。滚动功能有效，但不是平滑滚动。

我试过 : scrollIntoView({behavior: 'smooth'})，但它不起作用。

这是我的 html 组件

        <div *ngIf="displayNoneOnBtn" [hidden]="!displayNoneOnBtn"  id="btnTest" class="shadow d-flex flex-column align-items-center justify-content-center">
            <ng-container *ngIf="!disableBtn">
                <i class="material-icons arrow-up-button" (click)="scrollTopWindow()">keyboard_arrow_up</i>
            </ng-container>
            <ng-container *ngIf="disableBtn">
                <i class="material-icons arrow-down-button" (click)="scrollDown()">keyboard_arrow_down</i>
            </ng-container>
        </div>

还有我的 TS 组件

    import {Component, OnInit, ElementRef} from '@angular/core';
import 'hammerjs';
import { SessionService, UiService } from 'src/app/core/services';

@Component({
    templateUrl: './frontend.component.html',
    styleUrls: ['./frontend.component.scss'],
})

export class FrontendComponent implements OnInit {
    top: number;
    disableBtn = true;
    scrollHeight: number;
    displayNoneOnBtn = true;

    constructor(
        public sessionService: SessionService,
        public uiService: UiService,
        private el: ElementRef,
    ) {
    }

    scrollClass: any;

    ngOnInit(): void {
        this.scrollClass = Array.prototype.slice.call(this.el.nativeElement.getElementsByClassName('pageScroll'), 0)[0];
        console.log('scroll scrollTop', this.scrollClass.scrollTop);
        console.log('scroll scrollHeight', this.scrollClass.scrollHeight);
        console.log('scroll offsetHeight', this.scrollClass.offsetHeight);
    }

    asideNavToogle(status: string) {
        this.uiService.stateAsideNav = status;
    }

    scrollDown() {
        this.scrollClass.scrollTop = this.scrollClass.scrollHeight;
    }

    scrollTopWindow() {
        this.scrollClass.scrollTop = 0;
        this.el.nativeElement.scrollIntoView({behavior: 'smooth'});
    }

    onScroll (event: Event) {
        console.log('scroll scrollTop', this.scrollClass.scrollTop);
        console.log('scroll scrollHeight', this.scrollClass.scrollHeight);
        console.log('scroll offsetHeight', this.scrollClass.offsetHeight);
        if (this.scrollClass.scrollTop === 0) {
            this.disableBtn = true;
        }
        if (this.scrollClass.scrollHeight === this.scrollClass.scrollTop + this.scrollClass.offsetHeight) {
            this.disableBtn = false;
        }
        if (this.scrollClass.scrollHeight === this.scrollClass.offsetHeight) {
            this.displayNoneOnBtn = false ;
        }

    }

}

Answer 1

我做了下面的例子：

https://stackblitz.com/edit/angular-vjsz9w

我希望我有所帮助。

Answer 2

我通过使用 Jquery 函数解决了这个问题：

    scrollDown() {
        $('.pageScroll').animate({
            scrollTop: this.scrollClass.scrollHeight
        }, 500);
    }

    scrollTop() {
        $('.pageScroll').animate({
            scrollTop: 0
        }, 500);
    }