angular7监听滚动条滚动，路由跳转到顶部

悠悠 2021-10-18 15:16 765阅读 0赞

#### 监听滚动条滚动 ####

app.component.ts

import { fromEvent } from 'rxjs';
    
    export class AppComponent implements OnInit {
        subscribeScoll: any;
    
        scrollDis: any = {
            _top: 0
        };
    
        constructor(
            private router: Router
        ) {}
    
        ngOnInit() {
    
            // 监听滚动条滚动
            this.subscribeScoll = fromEvent(window, 'scroll').subscribe((event) => {
                this.onWindowScroll(); // 调用
            });
        }
    	
    	// 获取滚动条滚动的位置
        scollPostion() {
            let t: any;
            let l: any;
            let w: any;
            let h: any;
            if (document.documentElement && document.documentElement.scrollTop) {
                t = document.documentElement.scrollTop;
                l = document.documentElement.scrollLeft;
                w = document.documentElement.scrollWidth;
                h = document.documentElement.scrollHeight;
            } else if (document.body) {
                t = document.body.scrollTop;
                l = document.body.scrollLeft;
                w = document.body.scrollWidth;
                h = document.body.scrollHeight;
            }
            return {
                top: t,
                left: l,
                width: w,
                height: h
            };
        }
    	
    	// 获取不同方向上滚动的距离
        onWindowScroll() {
            this.scrollDis._top = this.scollPostion().top;
            console.log(this.scrollDis._top);
        }
    }

#### 路由跳转页面滚动到顶部 ####

app.component.ts

import { Component, OnInit } from '@angular/core';
    import { Router } from '@angular/router';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    })
    export class AppComponent implements OnInit {
        constructor(
            private router: Router
        ) {}
    
        ngOnInit() {
            this.router.events.subscribe((event) => {
                document.documentElement.scrollTop = 0;
                document.body.scrollTop = 0;
            });
        }
    }