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.dom) {
const contentScrollTop = this.dom.scrollTop
if (contentScrollTop >= 500) {
flag = true
}
this.setState({
flag
}, () => {
// todo 根据flag 去改变样式或...
})
}
}
react 监听页面滚动的更多相关文章
- vue中监听页面滚动和监听某元素滚动
①监听页面滚动 在生命周期mounted中进行监听滚动: mounted () { window.addEventListener('scroll', this.scrollToTop) }, 在方法 ...
- vue 中监听页面滚动
监听页面滚动 在methods中定义一个方法 handleScroll() { //获取滚动时的高度 let scrollTop = window.pageYOffset || document.do ...
- 原 JQuery监听页面滚动总结
1.当前滚动的地方的窗口顶端到整个页面顶端的距离: var winPos = $(window).scrollTop(); 2.获取指定元素的页面位置: $(val).offset().top; 3. ...
- JQuery监听页面滚动总结
1.当前滚动的地方的窗口顶端到整个页面顶端的距离: var winPos = $(window).scrollTop(); 2.获取指定元素的页面位置: $(val).offset().top; 3. ...
- ionic 监听页面滚动,点击停止滚动
类似今日头条,页面上有很多card,点击每个card跳转该card的详情页面.这里有一个问题,当我滚动页面时,会先后触发touchstart.touchmove.touchend,但是当touchen ...
- JS监听页面滚动到底部事件
废话不说,直接上代码,放心我这个是最好的,直接放到js脚本里,直接生效: $(window).scroll(function(){ var scrollTop = $(this).scrollTop( ...
- js-监听页面滚动
两种监听页面滚动的方法 一.原生js通过window.onscroll监听 window.onscroll = function() { //为了保证兼容性,这里取两个值,哪个有值取哪一个 //scr ...
- uni-app中不使用scroll-view组件,监听页面滑直底部事件
最终达到的目标效果 将要用到 监听页面滚动事件:onPageScroll 获取节点信息uni.createSelectorQuery() 标签布局 <template> <view ...
- jq监听页面的滚动事件,
jQuery监听页面的滚动状态,实现代码: $(document).scroll(function() { var scroH = $(document).scrollTop(); //滚 ...
随机推荐
- Linux下安装Nginx并配置一个图片服务器
首先安装nginx安装环境 nginx是C语言开发,建议在linux上运行,本教程使用Centos6.5作为安装环境. gcc 安装nginx需要先将官网下载的源码进行编译,编译依赖gcc环境,如果没 ...
- redis5.0.4多实例安装
一.安装第一个实例 https://www.cnblogs.com/qq931399960/p/10584877.html 二.拷贝配置文件 cp /etc/redis.conf /etc/redis ...
- Java异步NIO框架Netty实现高性能高并发
原文地址:http://blog.csdn.net/opengl_es/article/details/40979371?utm_source=tuicool&utm_medium=refer ...
- 蓝牙secure simple pair 概述
Secure Simple Pairing,简称SSP,其流程主要分为六个部分: • IO capabilities exchange • Public key exchange • Authenti ...
- linux下下载安装jdk
jdk的安装 一:到oracl官网下载你所需要的jdk版本; https://www.oracle.com/technetwork/java/javase/downloads/index.html 拉 ...
- (六)jdk8学习心得之Stream流
六.Stream流 1. 什么是stream流 现阶段,可以把stream流看成一个高级版的Iterator.普通的Iterator只能实现遍历,遍历做什么,就需要具体些功能代码函数了.而这个stre ...
- 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 ...
- OpenStack 命令行速查表
OpenStack 命令行速查表 updated: 2017-07-18 08:53 Contents 认证 (keystone) 镜像(glance) 计算 (nova) 实例的暂停.挂起.停止 ...
- JPA:identifier of an instance of was altered from
由于前台提交的对象,并没有关联对象的数据. 所以要把关联对象赋值一下,在合并集合. WmsOutboundreport entity2 = service.findOne(item.getOutbou ...
- 论Scrapy中的数据持久化
引入 Scrapy的数据持久化,主要包括存储到数据库.文件以及内置数据存储. 那我们今天就来讲讲如何把Scrapy中的数据存储到数据库和文件当中. 终端指令存储 保证爬虫文件的parse方法中有可迭代 ...