Detailed explanation on adding and deleting onScroll events in React.Js

React is a JS component library developed by Facebook for building front-end interfaces. Due to the strong background behind it, this library has no problems in technical development. This article mainly introduces you to the relevant information about adding and deleting onScroll events in React.Js. The article introduces it in great detail through sample code. It has certain reference learning value for everyone's study or work. Friends who need it follow the editor below. Come and learn together.

Advantages of React

• Solve the problem that data keeps changing and become difficult to operate in large-scale project development;

• Components Globalized development makes development faster;

• One-way data flow is helpful for finding problems;

• Virtual DOM has a set inside React The diff algorithm can quickly calculate the overall position that needs to be changed, so as to achieve fast partial refresh; for example: delete a list and insert a new table. After calculation, the differences will be compared and then inserted;

Preface

Everyone may encounter such a problem, that is, scrolling events. Compared with getting the scroll event of p, if you want to add a scroll event to p in ReactJS, it is basically impossible to add it (maybe because my ability is limited, anyway, so far, I have not found a way to directly add scroll event to p. event).

If you want to implement scrolling, you must register the scroll event in componentWillMount, window.addEventListener('scroll', this.onScroll.bind(this)). Adding events is very easy.

Delete window.removeEventListener(‘scroll’, this.onScroll.bind(this)) in componentWillUnmount.

It is easy to add but difficult to delete. The above remove cannot be deleted. In other pages, if you scroll, the event in onScroll will be triggered. At this time, an error will be reported, saying that the component has been uninstalled and cannot be operated. Check the code and so on.

I thought I must have encountered it and found a solution. I found an article about how to remove scroll.

The code is as follows:

componentDidMount() {
 regScroll(this.handler.bind(this));
 //window.addEventListener('scroll', this.handler.bind(this),false)
}

componentWillUnmount() {
 window.onscroll = '';
 //window.removeEventListener('scroll', this.handler.bind(this),false)
}
 //添加事件监听
function regScroll(myHandler) {
 if (window.onscroll === null) {
 window.onscroll = myHandler
 } else if (typeof window.onscroll === 'function') {
 var oldHandler = window.onscroll;
 window.onscroll = function () {
 myHandler();
 oldHandler();
 }
 }
}
//删除所有事件监听
function removeScrollHandler(){
 window.onscroll=''
}

Related recommendations:

The event onscroll that is triggered when the element scroll bar is scrolling in html5

Detailed explanation of function throttling in JavaScript that triggers the onScroll event

About the bug description of the onScroll event triggering three times per scroll under IE6_javascript skills

The above is the detailed content of Detailed explanation on adding and deleting onScroll events in React.Js. For more information, please follow other related articles on the PHP Chinese website!