JavaScript触发onScroll事件的函数节流详解_onscroll节流,onscroll节流资源-CSDN文库

183 浏览量 2020-10-20 21:10:15 上传评论收藏 74KB PDF 举报

资源推荐

资源详情

资源评论

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;

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

内容反馈

weixin_38518006

粉丝: 3
资源: 996

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip