react 监听页面滚动

html:

// 如果使用typescript, 定义dom类型
private dom: HTMLDivElement | null

// ReactJS中,对Div监听只需要绑定 onScrollCapture事件

<div
    style={{
           flex: 1,
           height: ‘10000px‘,
           overflowY: ‘scroll‘,
           overflowX: ‘hidden‘,
         }}
     ref={dom => {this.dom = dom}}
     onScrollCapture={() => this.handleOnScroll()}
    >
    。。。

 </div>

js:

// 监听页面滚动

private handleOnScroll = () => {
    let flag = false
    if (this.tabdom) {
      const contentScrollTop = this.tabdom.scrollTop
      if (contentScrollTop >= 500) {
        flag = true
      }
      this.setState({
        flag
       }, () => {
        // todo  根据flag 去改变样式或...
        })
    }
  }    

原文地址:https://www.cnblogs.com/aloehui/p/10402844.html

时间: 2024-11-05 21:47:18

react 监听页面滚动的相关文章

监听页面滚动事件

不知大家在前端开发实践中有没有做过这样一个效果,就是页面布局中有一个顶部通栏的搜索登录框,我们的需求就是当鼠标向下滚动时,顶部通栏始终固定在顶部,并且默认顶部是透明背景,而当页面滚动时,顶部通栏的透明度随着页面卷曲的高度增加而变大,当页面滚动距离超过某一个高度时,透明度就固定不变了.顶部通栏的固定很好实现,只需要令其position属性值为fixed即可,顶部通栏的透明度则通过opacity属性来设置.比较容易出错的地方是这里需要监听页面滚动事件,得到实时的页面滚动距离,从而判断其距离的大小作出

监听页面滚动及滚动到指定位置

两种监听页面滚动的方法 一.原生js通过window.onscroll监听window.onscroll = function() {//为了保证兼容性,这里取两个值,哪个有值取哪一个//scrollTop就是触发滚轮事件时滚轮的高度var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;console.log("滚动距离" + scrollTop);} 二.Jquery通过$(wind

JQuery监听页面滚动总结

1.当前滚动的地方的窗口顶端到整个页面顶端的距离: var winPos = $(window).scrollTop(); 2.获取指定元素的页面位置: $(val).offset().top; 3.对页面滚动条滚动的监听:要放在页面加载的时候 $(window).scroll(function(event){ }); 4.设置滚动条到指定位置.$(window).scrollTop(offset).

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

类似今日头条,页面上有很多card,点击每个card跳转该card的详情页面.这里有一个问题,当我滚动页面时,会先后触发touchstart.touchmove.touchend,但是当touchend后,页面仍会因为惯性而继续滚动.这个时候,我想点击页面停止滚动,而不是跳转到某个card的详情页面. 原理很简单:设置一个状态,初始值为true,页面滚动时变为false,页面停止滚动,则恢复为true,只有这个值为true时,才能触发跳转事件,即进入card详情页面. 这里需要用到ionic的一

导航栏监听页面滚动跟随 简单封装

slide('.wedding-title', '.expo-list', 'change','.nav'); //导航条 参数:导航栏父级, 被监听元素 , 导航改变样式,导航栏 function slide(navfather, tClass, activeClass,nav) { var $navfather = $(navfather), $nav = $(nav); $navfather.css({ "position": 'relative' }); var $navfat

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

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

Android项目:使用pulltorefresh开源项目扩展为下拉刷新上拉加载更多的处理方法,监听listview滚动方向

很多android应用的下拉刷新都是使用的pulltorefresh这个开源项目,但是它的扩展性在下拉刷新同时又上拉加载更多时会有一定的局限性.查了很多地方,发现这个开源项目并不能很好的同时支持下拉刷新和上拉加载更多.这个组件有个mode的属性,可以设置为both,即上下同时都可拉动.但是只设置这个属性的话,上拉与下拉产生的效果是完全一致的.所以要使用这个开源项目做到下拉刷新并同时可上拉加载更多,就需要在代码中进行一些处理. ==========================pulltoref

C# NanUI WinFormium监听页面加载开始\结束

个人博客 地址:https://www.wenhaofan.com/article/20190501213608 因为NanUI文档中仅介绍了Formium窗口的监听,但是没有WinFormium相关的文档,查看源码后才找到监听方法,特此记录一下 public partial class Form1 : WinFormium {public Form1(): base("http://res.app.local/asserts/index.html") { InitializeComp

React监听窗口变化事件

功能说明:本例子采用MUI table组件 + React实现. 需求描述:固定表头,列表高度随浏览器窗口的改变而改变.(本例中当窗口高度小于472像素后,便不作限制) 实现简介:1.监听浏览器窗口,每当窗口大小发生改变,给列表高度重新复制: 2. 列表高度通过state来管理. 关键代码: 窗口监听事件管理: 列表高度处理函数: 组件里的设置: 效果图(关键项涂了马赛克...) 窗口高于472px: 窗口高度低于472px(列表边上的滚动条不见了,取而代之的浏览器窗口的滚动条,木有截下来)