Today I will introduce a new JavaScript event: scrollend.
I don’t know if you have encountered pain points about scrolling events in the process of web page development. We can use the onscroll event to monitor whether the browser scrolls, but it is difficult for us to know when the scrolling will be completed. We may Write the following code:
document.onscroll = event => {
clearTimeout(window.scrollEndTimer)
window.scrollEndTimer = setTimeout(callback, 100)
}
We can only roughly predict when the scrolling will be completed. For example, in the above code, we estimate that the scrolling may be completed after 100ms through setTimeout, which will cause the callback function to be triggered during the scrolling process or after a period of scrolling. The user experience is definitely not very good.
With the scrollend event, such requirements become much simpler:
document.onscrollend = event => {
…}
So why did it take so long for such a seemingly simple event to be supported by the Web platform? In fact, there are still many details to consider. There are actually a lot of details about the web page viewport and scrolling. If there is a web page that is zoomed in, you can scroll in this state, but you don’t actually scroll the document, even this user-driven visual viewport scrolling The scrollend event is also fired when the interaction is complete. Here are all the scenarios where the scrollend event might fire:
Browser animation ends or scrolling completes.
The user's touch is released.
The user's mouse has released a scroll key.
The user's key is released.
Scroll to fragment completion.
Scroll capture is complete.
scrollTo() completes.
The user scrolled the visual viewport.
The scrollend event will not fire when:
The user's gesture did not cause any scroll position change.
scrollTo() didn't produce any position change.
As with other scroll events, you can register event listeners in a number of ways:
addEventListener("scrollend", (event) => {
// 滚动结束
});
aScrollingElement.addEventListener("scrollend", (event) => {
// 滚动结束
});
Event properties can also be used:
document.onscrollend = (event) => {
// 滚动结束
};
aScrollingElement.onscrollend = (event) => {
// 滚动结束
};
If you want to use it now, it is recommended to check whether the event is supported in the current browser version:
'onscrollend' in window
// 可用
if ('onscrollend' in window) {
document.onscrollend = callback
}
else {
document.onscroll = event => {
clearTimeout(window.scrollEndTimer)
window.scrollEndTimer = setTimeout(callback, 100)
}
}
This event is currently supported in Firefox version 109, and other browsers will also provide support in the future:
In browser versions that have not yet supported, you can also use the following polyfill first:
https://github.com/argyleink/scrollyfills
import {
scrollend} from "scrollyfills"
document.onscrollend = callback
In order to keep the running experience of the page smooth, complex calculation logic should be avoided as far as possible when scrolling events occur. So many complex calculations that need to be triggered when scrolling are recommended to be done in the scrollend event. A more common use case is to synchronize related UI elements with where the scrolling stops. For example, the following scenario synchronizes the carousel scroll position with the dot indicator.
Synchronize the position of the scrolling carousel with the dot indicator.
Synchronize library items with their metadata.
Fetch data after user scrolls to a new tab.
You can check out some real-world usage scenarios and writing in the following website:
https://gui-challenges.web.app/carousel/dist/
reference link
https://github.com/argyleink/scrollyfills
https://developer.chrome.com/en/blog/scrollend-a-new-javascript-event/