Menu
I have a div with a class overflow: auto; Is there a way to control this scrollbar when it appears?
I have a ajax photo gallery (no page refresh) where some caption text is in a div, but the content is of varying length. If you scroll down in this div and then advance to the next slide, the scrollbar does not go back to the top. So, I was wondering if there was a way to control this scrollbar. Thanks.
923
You just need to add scroll-behavior: smooth; to your html style.
The difference For that, you need overflow: auto , which lets a browser automatically determine if a scroll bar is needed — or not. So in short: overflow: scroll : Always show a scroll bar. overflow: auto : Show a scroll bar when needed.
To prevent scrolling with this property, just apply the rule overflow: hidden to the body (for the entire page) or a container element. This hides all content beyond the element's border. Alternatively, use overflow: visible to show content that extends beyond the borders of the container.
With jQuery, you can set the top of the scroll area like so:
$('#contents').scrollTop(0);
Here's a demo showing this in action->
Note that this is also possible without jQuery:
document.getElementById('contents').scrollTop = 0;
And a demo of that->
For both demos, press the Reset button to set the scroll bar back to the top.
160
You can change the value of the property scrollTop of the <div> element.
See element.scrollTop on MDC docs
See element.scrollTop on MSDN
While scrollTop is not part of any standard, it is supported by all major browsers.
4
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
