Currently, I am working on a function that aims to smoothly scroll the web to a specific div each time a user scrolls "into" a container div. You can get a better idea of what I mean by looking at my JSFiddle.
Everything works perfectly when the user scrolls slowly or uses arrow keys. However, if the user performs an abrupt scroll, the animated scrolling becomes jerky and sometimes even jumps in the opposite direction mid-animation.
I'm not entirely sure if this issue is connected to momentum scrolling or the rapid increase in scroll speed when the user spins the scroll wheel very fast. It could also be due to some other reason that hasn't crossed my mind yet.
Below is the basic code needed to replicate the bug (same as in my JSFiddle):
HTML:
<body>
<div style="background-color:red;" class="autoscroll">
<p style="line-height:3;color:white;">
Ipsum Lorem<br><br>Ipsum Lorem<br><br>Ipsum Lorem<br><br>Ipsum Lorem<br><br>Ipsum Lorem
</p>
</div>
<div style="background-color:blue;" class="autoscroll">
<p style="line-height:3;color:white;">
// Contents here...
</p>
</div>
<div style="background-color:green;" class="autoscroll">
<p style="line-height:3;color:white;">
// Contents here...
</p>
</div>
<div style="background-color:brown;" class="autoscroll">
<p style="line-height:3;color:white;">
// Contents here...
</p>
</div>
</body>
CSS:
.autoscroll{
min-height:100%;
}
html, body, p{
margin:0;
padding:0;
}
JS:
// JavaScript code snippet here...
In addition to the above, I have two functions called disableScroll and enableScroll. While I did not include them in my JSFiddle, hoping to fix the issue with their help, it seems like the bug persists regardless. I seek advice on whether I should retain or remove these functions.
// Function definitions for disableScroll, enableScroll, etc.
Despite conducting thorough research on this matter, I haven't been able to find a solution. Any assistance would be greatly appreciated. Thank you.