I have been experimenting with creating a bounce effect on my custom scroller by utilizing the translate3d method for scrolling. I managed to successfully implement it, but now I am facing an issue where if you continuously scroll out of bounds (try double scrolling and keep going until it gets stuck), the content remains out of bounds until you scroll back in the opposite direction.
Here is an example: . You can also find the code on this JSFiddle link: JSFiddle.
My Question Is:
How can I create a scrolling bounce effect using JavaScript and CSS?
The following sections are optional to read.
Possible Reason It's Not Working Properly:
I suspect that one reason for this behavior could be related to an animation callback event. If the animation does not occur, meaning the transform value does not change, then the animation callback will not be triggered.
When the content has scrolled all the way to the extreme top or bottom, and you attempt to scroll again before the animation completes (thus the transform value remaining unchanged), the animation callback will not execute and as a result, the content won't bounce back within bounds.
Methods I Have Tried So Far:
One approach I experimented with involved checking if the scroll position changed, and only calling the animation callback function if there was a change detected. However, this method did not yield the desired outcome. Scrolling rapidly out of bounds resulted in a stuttering effect, preventing the content from fully reaching the outer limits before bouncing back. Here is a visual representation: . Link to the corresponding JSFiddle: JSFiddle.
Another strategy I attempted was adjusting the transform value by 0.1 whenever no change in scroll position was detected, thereby ensuring the animation callback would still be invoked. However, this caused a delay in bouncing back when scrolling out of bounds. To address this delay, I reduced the animation duration for cases where scrolling remained consistent, but encountered another issue - a delayed bounce back after excessive consecutive scrolling out of bounds. You can view this scenario in action on this JSFiddle link: JSFiddle.
console.clear();
// More JavaScript code snippets available here...
#outerWrapper {
height: 400px;
overflow: hidden;
display: flex;
background-color: black;
}
/* More CSS styles here... */
<div id="outerWrapper">
<div id="innerWrapper">
<div id="content">
// Content goes here
</div>
</div>
<div id="scrollbar">
<div id="scrollbar_thumb"></div>
</div>
</div>