以下是常见的监听滚动以及相应的操作

窗口滚动事件

当页面滚动时,如何动态切换布局/样式

1. 添加滚动事件的监听/注销

 1     //在componentDidMount,进行scroll事件的注册,绑定一个函数,让这个函数进行监听处理
2 componentDidMount() {
3 window.addEventListener('scroll', this.bindHandleScroll)
4 }
5 //在componentWillUnmount,进行scroll事件的注销
6 componentWillUnmount() {
7 window.removeEventListener('scroll', this.bindHandleScroll);
8 }
9 bindHandleScroll = (event) => {
10
11 }

2. 在state中添加参数,滚动页面时更新数据

更新参数后,设置样式。可以直接更新样式,也可以动态修改className然后在css文件中添加动态样式。

 1     bindHandleScroll = (event) => {
2 // 滚动的高度
3 const scrollTop = event.srcElement.documentElement.scrollTop
4 || window.pageYOffset
5 || event.srcElement.body.scrollTop;
6 this.setState({
7 hasVerticalScrolled: scrollTop > 10
8 })
9 }
10 render() {
11 return (
12 <div className="header-container" style={{backgroundColor:this.state.hasVerticalScrolled?'#ffffff':'transparent'}}>
13 <div className="headerTitle-container">
14 <img className={`headerTitle${this.state.hasVerticalScrolled ? '-scrolled' : ''}`}></img>
15 </div>
16 </div>
17 );
18 }

完整Code:

 1 import React, { Component } from 'react';
2 import './style.less';
3
4 interface PropsData {
5 }
6 interface StateData {
7 hasVerticalScrolled: boolean;
8 }
9
10 class Index extends Component<PropsData, StateData> {
11 constructor(props) {
12 super(props);
13 this.state = {
14 hasVerticalScrolled: false
15 };
16 }
17
18 //在componentDidMount,进行scroll事件的注册,绑定一个函数,让这个函数进行监听处理
19 componentDidMount() {
20 window.addEventListener('scroll', this.bindHandleScroll)
21 }
22 //在componentWillUnmount,进行scroll事件的注销
23 componentWillUnmount() {
24 window.removeEventListener('scroll', this.bindHandleScroll);
25 }
26 bindHandleScroll = (event) => {
27 // 滚动的高度
28 const scrollTop = event.srcElement.documentElement.scrollTop
29 || window.pageYOffset
30 || event.srcElement.body.scrollTop;
31 this.setState({
32 hasVerticalScrolled: scrollTop > 10
33 })
34 }
35 render() {
36 return (
37 <div className="header-container" style={{backgroundColor:this.state.hasVerticalScrolled?'#ffffff':'transparent'}}>
38 <div className="headerTitle-container">
39 <img className={`headerTitle${this.state.hasVerticalScrolled ? '-scrolled' : ''}`}></img>
40 </div>
41 </div>
42 );
43 }
44 }
45
46 export default Index;

容器内滚动

监听元素触发滚动

1 <div onScroll={exerciseContainerScrolled}>
2 </div>
1   const exerciseContainerScrolled = () => {
2 const exerciseContainerRoot = (document.getElementsByClassName('exercise-container') as HTMLCollectionOf<HTMLElement>)[0];
3 onScrollShowed(exerciseContainerRoot.scrollTop >= 200);
4 };

onscroll 事件

React 监听页面滚动,界面动态显示的更多相关文章

  1. react 监听页面滚动

    html: // 如果使用typescript, 定义dom类型 private dom: HTMLDivElement | null // ReactJS中,对Div监听只需要绑定 onScroll ...

  2. vue中监听页面滚动和监听某元素滚动

    ①监听页面滚动 在生命周期mounted中进行监听滚动: mounted () { window.addEventListener('scroll', this.scrollToTop) }, 在方法 ...

  3. vue 中监听页面滚动

    监听页面滚动 在methods中定义一个方法 handleScroll() { //获取滚动时的高度 let scrollTop = window.pageYOffset || document.do ...

  4. 原 JQuery监听页面滚动总结

    1.当前滚动的地方的窗口顶端到整个页面顶端的距离: var winPos = $(window).scrollTop(); 2.获取指定元素的页面位置: $(val).offset().top; 3. ...

  5. JQuery监听页面滚动总结

    1.当前滚动的地方的窗口顶端到整个页面顶端的距离: var winPos = $(window).scrollTop(); 2.获取指定元素的页面位置: $(val).offset().top; 3. ...

  6. ionic 监听页面滚动,点击停止滚动

    类似今日头条,页面上有很多card,点击每个card跳转该card的详情页面.这里有一个问题,当我滚动页面时,会先后触发touchstart.touchmove.touchend,但是当touchen ...

  7. JS监听页面滚动到底部事件

    废话不说,直接上代码,放心我这个是最好的,直接放到js脚本里,直接生效: $(window).scroll(function(){ var scrollTop = $(this).scrollTop( ...

  8. js-监听页面滚动

    两种监听页面滚动的方法 一.原生js通过window.onscroll监听 window.onscroll = function() { //为了保证兼容性,这里取两个值,哪个有值取哪一个 //scr ...

  9. uni-app中不使用scroll-view组件,监听页面滑直底部事件

    最终达到的目标效果 将要用到 监听页面滚动事件:onPageScroll 获取节点信息uni.createSelectorQuery() 标签布局 <template> <view ...

  10. jq监听页面的滚动事件,

    jQuery监听页面的滚动状态,实现代码: $(document).scroll(function() {       var scroH = $(document).scrollTop(); //滚 ...

随机推荐

  1. gensim

    官方文档: https://radimrehurek.com/gensim/models/word2vec.html 1.训练模型定义 from gensim.models import word2v ...

  2. 搭建Angular基础项目学习

    https://stackblitz.com/借助StackBlitz网站可快速开始搭建一个angular项目 一个angular的component包含三项东西 A component class  ...

  3. jmeter学习-性能指标、jmeter初识

    一:性能测试的指标 1. 并发/并发数/并发用户数 狭义的并发:同一时间做相同的一件事 广义的并发:同一时间做不同事情,混合场景,对服务器来说的并发 性能测试,先做简单的狭义并发,在做广义并发:先做单 ...

  4. 在Windows平台上利用CMD命令行来压缩和解压缩.tar.gz压缩包

    解压命令: tar -xzvf dwt.tar.gz -C tmp/ 上述命令将dwt.tar.gz压缩包解压到tmp/文件夹 压缩命令: tar -czvf dwt.tar.gz dwt/ 上述命令 ...

  5. Caused by: java.lang.NoClassDefFoundError: net/minidev/asm/FieldFilter 报错的解决

    Caused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'r ...

  6. C知识点

    1.变量在内存中所占存储空间的首地址,称为该变量的地址:而变量在存储空间中存放的数据,即变量的值. C语言中,指针就是变量的地址.一个变量的值是另一个变量的地址,且变量类型相同,则称该变量为指针变量. ...

  7. C#重点语法——特性

    特性的基本理解 ************************************************************************************* 一.含义 特 ...

  8. Windows 任务栏透明 居中

    任务栏设置 任务栏居中 由于windows默认的程序是从左往右显示,看着可能有一点不舒服,当然如果使用习惯的话,忽然居中,可能更不舒服 首先搜索字符映射表 点击字符映设表中第五行的空白字符,选择进行复 ...

  9. ElasticSearch 实现分词全文检索 - 聚合查询 cardinality

    目录 ElasticSearch 实现分词全文检索 - 概述 ElasticSearch 实现分词全文检索 - ES.Kibana.IK安装 ElasticSearch 实现分词全文检索 - Rest ...

  10. [CTF学习笔记]net-pack(WinShark)

    题目:shark on wire 1 Description We found this packet capture. Recover the flag. 思路 这里懂得了winshark的一些基本 ...