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?
- Change the position of MessageBox - Tkinter
- 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?
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.