The features of the scroll-bar can be controlled by the use of CSS. Earlier it was not possible but with new versions of CSS made it possible for the web-designer. We can use CSS “::-webkit-scrollbar” property which is responsible for changing the shape, colour, 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.
Note: Adding basic CSS property to the scroll-bar in every example to make it looks better.
Example 1: This example placing the scroll-bar in the right hand side of the div element (By default Condition).
Output: The output contains black color scroll-bar on the right side of the division.
Example 2: Placing the scroll-bar in left side of the div element. The difference between right side scroll-bar and left side scroll-bar code has been highlighted
Output: The black color scroll-bar is displaying on the left side of the div element.
Example 3: Placing the scroll-bar on the bottom of the division.
Output: The black color scroll-bar is displaying on the bottom of the div element.
Example 4: Placing the scroll-bar on the top of the div element. The difference between bottom position of scrool-bar and top position of scroll-bar code has been highlighted.
Output: The black color scroll-bar is displaying on the top of the container div element.
Note: Using the HTML and CSS can also change the position of the scroll-bar of the webpage to left from the right side of the page.
Example 5: Placing the scroll-bar on the left side of the whole page.
Example 6: The difference between both the codes is been highlighted.
- CSS | scrollbar-width Property
- CSS | scrollbar-color Property
- CSS | ::-webkit-scrollbar
- How to disable scrollbar without hiding using jQuery ?
- How to check if a scrollbar is visible?
- Change the size and position of button in Kivy
- How to change the position of modal close button in bootstrap?
- How to position a div at the bottom of its container using CSS?
- How to change color of PNG image using CSS?
- How to change the thickness of hr tag using CSS ?
- How to change an input button image using CSS?
- How to change Input characters to Upper Case while typing using CSS/jQuery ?
- How to change the style of alert box using CSS ?
- How to change the color of selected text using CSS ?
- How to change the font-color of disabled input using CSS ?
- How to Create an Effect to Change Button Color using HTML and CSS ?
- How to change opacity of every data element on hover in a table using CSS ?
- How to change the cases of text in paragraph using CSS?
- CSS | list-style-position Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.