没有合适的资源?快使用搜索试试~ 我知道了~
JavaScript触发onScroll事件的函数节流详解
4 下载量 144 浏览量
2020-10-20
21:10:15
上传
评论
收藏 74KB PDF 举报
温馨提示
的内容是说说最近在工作中遇到过的常见的问题。主要是关于JavaScript触发onScroll事件的函数节流,文中由一个常见的问题开始展开,一步步的介绍解决的方法,有需要的朋友们下面来跟着小编一起看看吧。
资源推荐
资源详情
资源评论
JavaScript触发触发onScroll事件的函数节流详解事件的函数节流详解
的内容是说说最近在工作中遇到过的常见的问题。主要是关于JavaScript触发onScroll事件的函数节流,文中由
一个常见的问题开始展开,一步步的介绍解决的方法,有需要的朋友们下面来跟着小编一起看看吧。
问题描述问题描述
常见的网站布局,顶部一个导航栏,我们假设本页面共有四个栏目:分别为A、B、C、D,我们点击A,锚点跳转至A栏目,
同时顶部的A按钮高亮;点击B,锚点跳转至B栏目,同时顶部的B按钮高亮;我们在Main组件里面滚动,滚动到B模块时,B
按钮高亮。以上是我们经常会在开发中遇到的一个模型。如果是在以前,用jQuery作前端开发的话,实在是太熟悉不过了。
解决方案解决方案
主要想谈谈在React组件化开发中的性能优化方法。
我们的页面结构是这样的
<div
className={style.main}
id="main"
ref={(main) => { this.main = main; }}
onScroll={
((/detail/.test(this.props.location.pathname))) ? (() => this.throttle()()) : null
}
>
{this.props.children}
<Footer />
我们在main组件里设定onScroll事件,在这个事件中,我们触发action,通过redux将状态的变化传递到子组件。
我的scroll事件触发函数是这样的(忽略一长串的if else,这是一个解决了一下午的bug的终极解决方案,此文不做累述)
handleScroll() {
const { changeScrollFlag } = this.props.actions;
// 根据滚动距离修改TitleBox的样式
const { basicinformation, holderinformation, mainpeople, changerecord } = {
basicinformation: document.getElementById('basicinformation').offsetTop - 121,
holderinformation: document.getElementById('holderinformation').offsetTop - 121,
mainpeople: document.getElementById('mainpeople').offsetTop - 121,
changerecord: document.getElementById('changerecord').offsetTop - 121,
};
if (window.screen.availHeight > this.main.scrollTop) {
document.getElementById('gototop').style.display = 'none';
} else {
document.getElementById('gototop').style.display = 'block';
}
// 得到基础信息区域、股东信息区域、主要人员区域、变更记录区域的offsetTop,我们把它用来跟main的scrollTop比较
// 比较的结果触发action,改变TitleBox组件样式
if (this.main.scrollTop < holderinformation) {
// 基础信息区域
if (basicinformation === -121) {
// 如果基础信息模块不存在,我们什么也不做(当然理论上基础信息模块应该是会有的)
return;
}
changeScrollFlag(1);
return;
} else if (this.main.scrollTop < mainpeople) {
// 股东信息区域
changeScrollFlag(2);
if (holderinformation === -121) {
// 如果股东信息栏目不存在,在滚动的时候我们不应该强行把TileBox的高亮按钮设置为holderinformation
// 因为holdinformation并不存在,我们跳到前一个按钮,让基础信息按钮高亮
changeScrollFlag(1);
return;
}
return;
} else if (this.main.scrollTop < changerecord) {
// 主要人员区域
changeScrollFlag(3);
if (mainpeople === -121) {
// 如果主要人员栏目不存在,在滚动的时候我们不应该强行把TileBox的高亮按钮设置为mainpeople
// mainpeople并不存在,我们跳到前一个按钮,让基础信息按钮高亮
changeScrollFlag(2);
if (holderinformation === -121) {
// 如果主要人员栏目不存在,而且连股东信息栏目也没有,我们跳到高亮基础信息栏目
changeScrollFlag(1);
return;
资源评论
weixin_38518006
- 粉丝: 3
- 资源: 996
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- java带财务进销存ERP管理系统源码数据库 MySQL源码类型 WebForm
- java制造业MES生产管理系统源码 MES源码数据库 MySQL源码类型 WebForm
- 基于无人机航拍数据实现的三维场景重建python源代码+文档说明+数据集(高分项目)
- 【重磅,更新!】全国2000-2022年植被指数数据(分辨率30m)
- 包含Qt5Core.dll Qt5Gui.dll Qt5Network.dll Qt5Svg.dll Qt5Widgets.dl
- python3.6 get-pip.py
- python期末大作业基于ResNet的人脸表情识别项目源码+数据集+模型文件(高分项目)
- C#大型多门店4S连锁汽车维修保养管理系统源码(带文档)数据库 SQL2008源码类型 WebForm
- 【安卓毕业设计】基于Android健康检测系统的设计与实现源码(完整前后端+mysql+说明文档).zip
- 【重磅,更新!】中国分省农户创业活动农户创业活跃度(2011-2021年)
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功