EN
React - on vertical scroll event
0 points
In this article, we would like to show you vertical onScroll event usage in React.
By default there's no onVerticalScroll method but we can achieve the same effect by monitoring the scrollTop property changes.
In the below example, we create <div> element with a scrollbar. When we scroll items vertically inside the div, onScroll triggers handleScroll method which displays messages.
Runnable example:
xxxxxxxxxx1
// Note: Uncomment import lines while working with compiler.2
// import React from 'react';3
// import ReactDOM from 'react-dom';4
5
const appStyle = {6
width: '150px',7
height: '150px',8
whiteSpace: 'nowrap', // used only to display text as not wrapped lines9
overflow: 'scroll'10
};11
12
const App = () => {13
const positionRef = React.useRef(0);14
const handleScroll = (e) => {15
const x = e.currentTarget.scrollTop;16
if (x !== positionRef.current) {17
positionRef.current = x;18
console.log('Vertical scroll event occurred ...');19
}20
};21
return (22
<div style={appStyle} onScroll={handleScroll}>23
<ul>24
<li>Some very long text test here ...</li>25
<li>Some very long text test here ...</li>26
<li>Some very long text test here ...</li>27
<li>Some very long text test here ...</li>28
<li>Some very long text test here ...</li>29
<li>Some very long text test here ...</li>30
<li>Some very long text test here ...</li>31
<li>Some very long text test here ...</li>32
<li>Some very long text test here ...</li>33
</ul>34
</div>35
);36
};37
38
const root = document.querySelector('#root');39
ReactDOM.render(<App />, root);Note:
React documentation says: starting from React 17 the
onScrollevent does not bubble in React. This matches the browser behavior and prevents the confusion when a nested scrollable element fires events on a distant parent.
In this example, we create a reusable hook that executes the callback function only on a vertical scroll.
xxxxxxxxxx1
// Note: Uncomment import lines while working with compiler.2
// import React from 'react';3
// import ReactDOM from 'react-dom';4
5
const useVerticalScrollEvent = (callback) => {6
const positionRef = React.useRef(0);7
return (e) => {8
const x = e.currentTarget.scrollTop;9
if (x !== positionRef.current) {10
positionRef.current = x;11
callback(e);12
}13
};14
};15
16
17
// Usage example:18
19
const appStyle = {20
width: '150px',21
height: '150px',22
whiteSpace: 'nowrap', // used only to display text as not wrapped lines23
overflow: 'scroll'24
};25
26
const App = () => {27
const handleScroll = useVerticalScrollEvent((e) => {28
console.log('Vertical scroll event occurred ...');29
});30
return (31
<div style={appStyle} onScroll={handleScroll}>32
<ul>33
<li>Some very long text test here ...</li>34
<li>Some very long text test here ...</li>35
<li>Some very long text test here ...</li>36
<li>Some very long text test here ...</li>37
<li>Some very long text test here ...</li>38
<li>Some very long text test here ...</li>39
<li>Some very long text test here ...</li>40
<li>Some very long text test here ...</li>41
<li>Some very long text test here ...</li>42
</ul>43
</div>44
);45
};46
47
const root = document.querySelector('#root');48
ReactDOM.render(<App />, root);
