Menu
Making a div vertically scrollable is easy by using CSS overflow property. There are different values in overflow property. For example: overflow:auto; and the axis hiding procedure like overflow-x:hidden; and overflow-y:auto;.
We can use the CSS “::-webkit-scrollbar” property which is responsible for changing the shape, color, size, shade, shadow, etc. of the scroll bar. But, here the property which we will use is the direction property of CSS for changing the position of the scroll bar.
The overflow-x CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.
For horizontal scrollable bar use the x and y-axis. Set the overflow-y: hidden; and overflow-x: auto; that will automatically hide the vertical scroll bar and present only the horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line.
You can use scrollLeft and scrollTop properties. Ex:
document.getElementById("yourScrollElementId").scrollTop = 100
Or you can use jquery methods to make it easier and animated as well.
You can use jQuery scrollLeft() and scrollTop() methods.
$('.outerDiv').scrollLeft(300);
$('.outerDiv').scrollTop(50);
Example: https://jsfiddle.net/upwrrj70/
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