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.dom) {
const contentScrollTop = this.dom.scrollTop
if (contentScrollTop >= 500) {
flag = true
}
this.setState({
flag
}, () => {
// todo 根据flag 去改变样式或...
})
}
}

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

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

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

  2. vue 中监听页面滚动

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

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

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

  4. JQuery监听页面滚动总结

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

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

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

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

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

  7. js-监听页面滚动

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

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

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

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

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

随机推荐

  1. Linux下安装Nginx并配置一个图片服务器

    首先安装nginx安装环境 nginx是C语言开发,建议在linux上运行,本教程使用Centos6.5作为安装环境. gcc 安装nginx需要先将官网下载的源码进行编译,编译依赖gcc环境,如果没 ...

  2. redis5.0.4多实例安装

    一.安装第一个实例 https://www.cnblogs.com/qq931399960/p/10584877.html 二.拷贝配置文件 cp /etc/redis.conf /etc/redis ...

  3. Java异步NIO框架Netty实现高性能高并发

    原文地址:http://blog.csdn.net/opengl_es/article/details/40979371?utm_source=tuicool&utm_medium=refer ...

  4. 蓝牙secure simple pair 概述

    Secure Simple Pairing,简称SSP,其流程主要分为六个部分: • IO capabilities exchange • Public key exchange • Authenti ...

  5. linux下下载安装jdk

    jdk的安装 一:到oracl官网下载你所需要的jdk版本; https://www.oracle.com/technetwork/java/javase/downloads/index.html 拉 ...

  6. (六)jdk8学习心得之Stream流

    六.Stream流 1. 什么是stream流 现阶段,可以把stream流看成一个高级版的Iterator.普通的Iterator只能实现遍历,遍历做什么,就需要具体些功能代码函数了.而这个stre ...

  7. Tutorial: Create a Windows Machine Learning UWP application (C#)

    In this tutorial, we'll build a simple Universal Windows Platform application that uses a trained ma ...

  8. OpenStack 命令行速查表

    OpenStack 命令行速查表   updated: 2017-07-18 08:53 Contents 认证 (keystone) 镜像(glance) 计算 (nova) 实例的暂停.挂起.停止 ...

  9. JPA:identifier of an instance of was altered from

    由于前台提交的对象,并没有关联对象的数据. 所以要把关联对象赋值一下,在合并集合. WmsOutboundreport entity2 = service.findOne(item.getOutbou ...

  10. 论Scrapy中的数据持久化

    引入 Scrapy的数据持久化,主要包括存储到数据库.文件以及内置数据存储. 那我们今天就来讲讲如何把Scrapy中的数据存储到数据库和文件当中. 终端指令存储 保证爬虫文件的parse方法中有可迭代 ...