react取消监听scroll事件
如果要移除事件addEventListener的执行函数必须使用外部函数而不能直接使用匿名函数
错误写法:
// 这样写是移除不了滚动事件的
componentDidMount() {
// 添加滚动监听
window.addEventListener('scroll', ()=>{
console.log("滚动距离:",window.scrollY)
});
}
// 组件将要卸载,取消监听window滚动事件
componentWillUnmount(){
window.removeEventListener('scroll', ()=>{
console.log("滚动距离:",window.scrollY)
});
}
正确写法:
componentDidMount() {
// 添加滚动监听
window.addEventListener('scroll', this.scroll);
}
// 组件将要卸载,取消监听window滚动事件
componentWillUnmount(){
window.removeEventListener('scroll', this.scroll);
}
scroll1 = ()=>{
console.log("滚动距离:",window.scrollY)
}
react取消监听scroll事件的更多相关文章
- mui 怎样监听scroll事件的滚动距离
var scroll = mui('.mui-scroll-wrapper').scroll(); document.querySelector('.mui-scroll-wrapper' ).add ...
- Vue 爬坑之路(七)—— 监听滚动事件 实现动态锚点
前几天做项目的时候,需要实现一个动态锚点的效果 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑 ...
- js 事件监听 冒泡事件
js 事件监听 冒泡事件 的取消 [自己写框架时,才有可能用到] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitiona ...
- 两种js监听滚轮事件的方式
前段时间在写前端的时候,需要监听浏览器的滚轮事件 网上查了一下,找到两种监听滚轮事件的方法: 一.原生js通过window.onscroll监听 //window.onscroll = functio ...
- vue监听滚动事件,实现滚动监听
在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...
- vue监听滚动事件-元素固定位置显示
1.监听滚动事件 用VUE写一个在控制台打印当前的scrollTop用来测试是否执行: mounted () { window.addEventListener('scroll', this.hand ...
- vue监听滚动事件 实现某元素吸顶或者固定位置显示
https://blog.csdn.net/wang1006008051/article/details/78003974 1.监听滚动事件 利用VUE写一个在控制台打印当前的scrollTop, 首 ...
- vue监听滚动事件
vue中监听滚动事件,然后对其进行事件处理,一般有:1. 滚动到顶部吸附: 2. 根据滚动的位置激活对应的tab键(锚链接tab键) 这两种方式的处理都是可通过监听scroll来实现 mounted( ...
- Qt实现小功能之列表无限加载(创意很不错:监听滚动条事件,到底部的时候再new QListWidgetItem)
概念介绍 无限加载与瀑布流的结合在Web前端开发中的效果非常新颖,对于网页内容具备较好的表现形式.无限加载并没有一次性将内容全部加载进来,而是通过监听滚动条事件来刷新内容的.当用户往下拖动滚动条或使用 ...
随机推荐
- 2008R2域控环境中 应用组策略 实现禁用USB设备使用
本文介绍如何在Windows Server 2008 AD中禁用客户端USB端口.本文使用的系统:Windows Server 2008 R2 企业版.域功能级别:Windows Server 200 ...
- 快速安装Nginx及配置详解(未完待续)
导读: Nginx (engine x) 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器,从2007年被德国人开发出来后可以说在市场的占有率一路飙升,因为它支持高并 ...
- android对话框显示异常报错:You need to use a Theme.AppCompat theme (or descendant) with this activity.
今天写android实验碰到到一个问题,在用AlertDialog.Builder类构建一个对话框之后,调用Builder.show()方法时抛出异常如下: - ::-/xyz.qlrr.sqlite ...
- highcharts中的x轴如何显示时分秒时间格式
上一篇文章写道:三分钟上手Highcharts简易甘特图:https://www.jianshu.com/p/d669d451711b,在官方文档里面,x轴默认为年月日. 在项目需求中,x轴要表示24 ...
- CentOS 7上安装gitlab-runner
1.yum install gitlab-runner -y 2.Registering Runners a.Run the following command: gitlab-runner regi ...
- FZU 1968 Twinkling lights III
Twinkling lights III Time Limit: 8000ms Memory Limit: 131072KB This problem will be judged on FZU. O ...
- <LeetCode OJ> 20. Valid Parentheses
Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the inpu ...
- CesiumJS - 3D Tiles BIM
CesiumJS - 3D Tiles BIM eryar@163.com 1. Introduction CesiumJS is an open-source JavaScript library ...
- selection-内容选中跟光标移动
如果我们希望手动的改变edittext的光标,我们可以使用 setSelection(int start, int end); setSelection(int index); 这个方法,如果我们选择 ...
- android 获取蓝牙已连接设备
蓝牙如果手动配对并已连接,获取连接的设备: 1.检测连接状态: int a2dp = bluetoothAdapter.getProfileConnectionState(BluetoothProfi ...