Menu
Is it possible to change the scrollbar position when the user reaches a certain point scrolling down a web page? For example once you reached half way down down the page the scrollbar would move automatically back to the top.
902
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.
To get or set the scroll position of an element, you follow these steps: First, select the element using the selecting methods such as querySelector() . Second, access the scroll position of the element via the scrollLeft and scrollTop properties.
A standard scroll bar is located in the nonclient area of a window. It is created with the window and displayed when the window is displayed.
The way to do it is add div with direction: rtl; as parent element, and for child div set direction: ltr; . $( ". your selector of child element" ). wrap( "<div class='scroll'></div>" );
You can calculate the percentage of the current position of the scrollbar using the onscroll event, and if it reaches the 50 % the scroll position can be set to the top of the page with the scrollTo function:
window.onload = function () { window.onscroll = function () { var doc = document.body, scrollPosition = doc.scrollTop, pageSize = (doc.scrollHeight - doc.clientHeight), percentageScrolled = Math.floor((scrollPosition / pageSize) * 100); if (percentageScrolled >= 50){ // if the percentage is >= 50, scroll to top window.scrollTo(0,0); } }; }; You can check my example here.
108
Yup, I've seen it a few times. Here is some JS code:
window.scrollBy(0,50) 50 is the amount of pixels you want to scroll by.
24
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
