How to Change the Position of Scrollbar using CSS? Last Updated : 20 Jun, 2025 Comments Improve Suggest changes Like Article Like Report Changing the position of the scrollbar using CSS can significantly enhance the user interface and user experience of your website. By default, scrollbars appear on the right side of the element, but with modern CSS techniques, you can customize their placement and appearance — especially for web apps and RTL (Right-to-Left) languages. Approximately 90% of developers rarely alter the scrollbar's position, yet 10% utilize such styling to improve accessibility or visual design in custom UI components.Here are the Methods to Change the Position of the Scrollbar using CSS:Method 1. Using the direction PropertyThe direction property specifies the text direction of an element's content. Setting it to rtl (right-to-left) moves the scrollbar to the left side. index.html <html> <head> <style> .scroll-left { direction: rtl; overflow-y: scroll; height: 150px; width: 300px; border: 1px solid #000; } .content { direction: ltr; } </style> </head> <body> <div class="scroll-left"> <div class="content"> This is a sample Code </div> </div> </body> </html> Code OverviewThe .scroll-left class applies direction: rtl; to move the scrollbar to the left.The inner .content div resets the text direction to left-to-right with direction: ltr;.2. Using the transform PropertyThe transform property can rotate elements, effectively repositioning the scrollbar. index.hml <html> <head> <style> .scroll-left { transform: rotateY(180deg); overflow-y: scroll; height: 150px; width: 300px; border: 1px solid #000; } .content { transform: rotateY(180deg); } </style> </head> <body> <div class="scroll-left"> <div class="content"> This is sample code </div> </div> </body> </html> Code OverviewThe .scroll-left class applies transform: rotateY(180deg); to flip the container, moving the scrollbar to the left.The inner .content div reverses the flip to display content normally.3. Using overflow-x and transform for Top ScrollbarTo position the scrollbar at the top, combine overflow-x with the transform property. index.html <html> <head> <style> .scroll-top { overflow-x: auto; transform: rotate(180deg); height: 150px; width: 300px; border: 1px solid #000; } .content { transform: rotate(180deg); } </style> </head> <body> <div class="scroll-top"> <div class="content"> This is a sample code </div> </div> </body> </html> Code OverviewThe .scroll-top class applies transform: rotate(180deg); to flip the container, placing the scrollbar at the top.The inner .content div reverses the flip to display content correctly. Comment More infoAdvertise with us Next Article How to Change the Position of Scrollbar using CSS? aditya_taparia Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to get the position of scrollbar using JavaScript ? JavaScript is an amazing language and there are many functions available through which we can access any element of the HTML page through javascript. There are some simple techniques to get the scrollbar position that are discussed below: Approach 1: Whenever the function getScroll() is encountered, 3 min read How to Change Style of Scrollbar using Tailwind CSS? By default, Tailwind CSS does not include built-in utilities for styling scrollbars. However, you can customize the appearance of scrollbars using traditional CSS in combination with Tailwind's utility classes. This is achieved by using the scrollbar-* classes to customize aspects like scrollbar wid 3 min read How to Get and Set Scroll Position of an Element using JavaScript ? In this article, we will learn how to get and set the scroll position of an HTML element using JavaScript.Approach: We will be using the HTML DOM querySelector() and addEventListener() methods and the HTML DOM innerHTML, scrollTop and scrollLeft properties.We create an HTML div element with an id of 3 min read How to make a Sidebar Sticky on Page Scroll using CSS ? A Sticky Sidebar contains important links and navigation options fixed on the screen, making it easy for users to access them while scrolling down. This improves the user experience by saving them from scrolling back to the top of the page to find essential information. We have used two different wa 4 min read How to Create a Custom Scrollbar using CSS? Scrollbars are common graphical user interface elements that allow users to navigate content beyond the visible area. By default, web browsers provide basic scrollbars with a predefined style. However, using HTML and CSS, you can customize the scrollbar to match your website's design better.Scrollba 4 min read How to Create Scrollable Horizontal Menu using CSS? The scrollable horizontal menu is suitable for various screen sizes. To create a scrollable horizontal menu using CSS, you can make use of the overflow property on a container.Syntaxwhite-space: nowrapoverflow: auto;HTML<!DOCTYPE html> <html> <head> <style> div.scrollmenu { b 1 min read How to create content area scrollable instead of the page using CSS ? Making a particular content area scrollable is done by using CSS overflow property. There are different values in overflow property that are listed below. visible: The property indicates that it can be rendered outside the block box and it is not clipped.hidden: This property indicates that the over 7 min read How to control scrolling of image using CSS ? In this article, we will see what property can be utilized to control the image scroll using CSS. To accomplish this task, we can implement the background-attachment property that specifies the kind of attachment of the background image with respect to its container. It can be applied to all HTML el 10 min read How to Create Shrink Header on Scroll using HTML, CSS and JavaScript ? The Shrink Navigation bar works when the user scrolls down the page. In this article, we will use HTML, CSS, and JavaScript to design a shrink navigation bar. HTML is used to create the structure, and CSS is used to set the style of the HTML structure to make it looks good. This kind of shrinking na 3 min read Like