查看: 144|回复: 0

Angular 监听滚动条事件

[复制链接]

3

主题

0

回帖

0

积分

热心网友

金币
0
阅读权限
220
精华
0
威望
0
贡献
0
在线时间
0 小时
注册时间
2011-10-18
发表于 2019-5-6 11:06:00 | 显示全部楼层 |阅读模式

一、引用fromEvent

import { fromEvent } from 'rxjs';

二、调用fromEvent

this.subscribeScoll = fromEvent(window, 'scroll')
      .subscribe((event) => {
        this.onWindowScroll();
});
onWindowScroll(){console.log(页面滚动了);};

三、调用滚动函数

 详细代码:

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);
  }
}

 



来源:https://www.cnblogs.com/1156063074hp/p/10818417.html
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

圆梦公社,专注于为全球华人提供纯粹技术交流的地方,请勿发布任何政治及违法的言论。如有相关侵权、举报、投诉及建议等,请发 E-mail:dzh188@hotmail.com

Powered by Discuz! X5.0 © 2001-2026 Discuz! Team.

在本版发帖返回顶部