Java教程

angular滚动条监听,三步搞定

本文主要是介绍angular滚动条监听,三步搞定,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

    今天给大家说一说怎样实现angular滚动条监听,以下三步轻松搞定:

1,引用fromEvent

import { fromEvent } from 'rxjs';

2,调用fromEvent

this.subscribeScoll = fromEvent(window, 'scroll')

      .subscribe((event) => {        this.onWindowScroll();

});

onWindowScroll(){console.log(页面滚动了);};

3,调用滚动函数

import { Component, OnInit } from '@angular/core';

import { fromEvent } from 'rxjs'; //引入@Component({

  selector: 'app-heroes',

  templateUrl: './heroes.component.html',

  styleUrls: ['./heroes.component.css']

})

export class HeroesComponent implements OnInit {

  subscribeScoll:any;

  scrollDis:any = {

    _top:0

  }

  constructor() { }

  ngOnInit() {    this.subscribeScoll = fromEvent(window, 'scroll')

      .subscribe((event) => {        this.onWindowScroll();//调用

    });

  }

  scollPostion() {    var t, l, w, h;    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);

  }

}

    好啦,以上便是关于angular滚动条监听的全部内容,更多内容干货可关注慕课网其他文章~


这篇关于angular滚动条监听,三步搞定的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!