The scroll bar on the left-hand side of the div element

How to change the position of the scrollbar using CSS?

A scrollbar refers to the element that allows a user to scroll through the content of a web page. It usually appears as a horizontal or vertical bar on the side or bottom of the page. The scrollbar is also known as the «scrollbar thumb,» which is the part of the scrollbar that moves when the user scrolls up and down.

In this article, we will discuss how to change the position of a scrollbar using CSS. We will cover the following topics −

• Creating a new class for the element
• Targeting the scrollbar and the thumb
• Using the «position» property to change the position of the scrollbar

Creating a new class for the element

First, we will need to create a new class in CSS for the element that we want to change the scrollbar position for. For example, if we want to change the position of the scrollbar for a div with the class «scrollablediv,» we will create the following class in CSS —

.scrollable-div  CSS Code……. > ::-webkit-scrollbar  width: 5px; background-color: #F5F5F5; >

This class will target the scrollbar for the «scrollable-div» element and set the width to 5 pixels and the background color to a light gray.

Targeting the thumb of the scrollbar

In this step, we target the thumb of the scrollbar. The thumb is the part of the scrollbar that moves when the user scrolls. We will do this by adding the following code to CSS class −

::-webkit-scrollbar-thumb  background-color: #000000; >

This will change the color of the thumb to black.

Using the «position» property to change the position of the scrollbar

In this final step, we will change the position of the scrollbar by using the «position» property. For example, if we want to position the scrollbar on the left side of the «scrollable-div» element, we will use the following code −

.scrollable-div::-webkit-scrollbar  position: absolute; left: 0; >

This will position the scrollbar on the left side of the «scrollable-div» element.

Example

This example puts the scroll bar on the Left-hand side of the div element.

   body < text-align:center; >.scrollable-div < height: 150px; width: 250px; overflow-y: auto; background-color:pink; margin:auto; padding:5px; transform: rotate(180deg); >.scrollable-div-inside < transform: rotate(-180deg); >.scrollable-div::-webkit-scrollbar < width: 5px; /* Set the width of the scrollbar */ background-color: #F5F5F5; /* Set the background color of the scrollbar */ position: absolute; right: 0; /* Position the scrollbar on the right of the element*/ >.scrollable-div::-webkit-scrollbar-thumb < background-color: #000000; /* Set the color of the thumb */ >::-webkit-scrollbar-track 
The scroll bar on the Left side of the div element
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
 
   

Example

This example puts the scroll bar on the right-hand side of the div element.

   body < text-align:center; >.scrollable-div < height: 150px; width: 250px; overflow-x: auto; background-color:pink; margin:auto; padding:5px; >.scrollable-div::-webkit-scrollbar < width: 5px; /* Set the width of the scrollbar */ background-color: #F5F5F5; /* Set the background color of the scrollbar */ position: absolute; left: 0; /* Position the scrollbar on the left of the element */ >.scrollable-div::-webkit-scrollbar-thumb < background-color: #000000; /* Set the color of the thumb */ >::-webkit-scrollbar-track 
The scroll bar on the right side of the div element
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
   

Conclusion

Changing the position of a scrollbar using CSS is a simple process that can be done by creating a new class for the element, targeting the scrollbar and the thumb, and then using the «position» property to change the position of the scrollbar. With a little bit of CSS knowledge and some experimentation, we can create a unique and custom look for the website.

Источник

Element: scrollLeft property

The Element.scrollLeft property gets or sets the number of pixels that an element’s content is scrolled from its left edge.

If the element’s direction is rtl (right-to-left), then scrollLeft is 0 when the scrollbar is at its rightmost position (at the start of the scrolled content), and then increasingly negative as you scroll towards the end of the content.

It can be specified as any integer value. However:

• If the element can’t be scrolled (e.g., it has no overflow), scrollLeft is set to 0 .
• If specified as a value less than 0 (greater than 0 for right-to-left elements), scrollLeft is set to 0 .
• If specified as a value greater than the maximum that the content can be scrolled, scrollLeft is set to the maximum.

Warning: On systems using display scaling, scrollLeft may give you a decimal value.

Value

Examples

HTML

div id="container"> div id="content">Click the button to slide right!div> div> button id="slide" type="button">Slide rightbutton> 

CSS

#container  width: 100px; height: 100px; border: 1px solid #ccc; overflow-x: scroll; > #content  width: 250px; background-color: #ccc; > 

JavaScript

const button = document.getElementById("slide"); button.onclick = () =>  document.getElementById("container").scrollLeft += 20; >; 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Custom Scrollbars in WebKit

Way back in the day, you could customize scrollbars in IE (e.g. v5.5) with non-standard CSS properties like scrollbar-base-color which you would use on the element that scrolls (like the ) and do totally rad things. IE dropped that. These days, customizing scrollbars is back, but it’s WebKit this time. It’s a bit better now, because the properties are vendor-prefixed (e.g. ::-webkit-scrollbar ) and use the “Shadow DOM“. This has been around for a couple of years. David Hyatt blogged it in early 2009.

::-webkit-scrollbar < /* 1 */ >::-webkit-scrollbar-button < /* 2 */ >::-webkit-scrollbar-track < /* 3 */ >::-webkit-scrollbar-track-piece < /* 4 */ >::-webkit-scrollbar-thumb < /* 5 */ >::-webkit-scrollbar-corner < /* 6 */ >::-webkit-resizer < /* 7 */ >

These are the pseudo-class selectors. They allow for more specific selection of the parts, like when the scrollbar is in different states.

:horizontal :vertical :decrement :increment :start :end :double-button :single-button :no-button :corner-present :window-inactive

I’m going to steal this whole section from David’s blog post on the WebKit blog because it explains each part well:

:horizontal – The horizontal pseudo-class applies to any scrollbar pieces that have a horizontal orientation. :vertical – The vertical pseudo-class applies to any scrollbar pieces that have a vertical orientation. :decrement – The decrement pseudo-class applies to buttons and track pieces. It indicates whether or not the button or track piece will decrement the view’s position when used (e.g., up on a vertical scrollbar, left on a horizontal scrollbar). :increment – The increment pseudo-class applies to buttons and track pieces. It indicates whether or not a button or track piece will increment the view’s position when used (e.g., down on a vertical scrollbar, right on a horizontal scrollbar). :start – The start pseudo-class applies to buttons and track pieces. It indicates whether the object is placed before the thumb. :end – The end pseudo-class applies to buttons and track pieces. It indicates whether the object is placed after the thumb. :double-button – The double-button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is part of a pair of buttons that are together at the same end of a scrollbar. For track pieces it indicates whether the track piece abuts a pair of buttons. :single-button – The single-button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is by itself at the end of a scrollbar. For track pieces it indicates whether the track piece abuts a singleton button. :no-button – Applies to track pieces and indicates whether or not the track piece runs to the edge of the scrollbar, i.e., there is no button at that end of the track. :corner-present – Applies to all scrollbar pieces and indicates whether or not a scrollbar corner is present. :window-inactive – Applies to all scrollbar pieces and indicates whether or not the window containing the scrollbar is currently active. (In recent nightlies, this pseudo-class now applies to ::selection as well. We plan to extend it to work with any content and to propose it as a new standard pseudo-class.)

::-webkit-scrollbar-track-piece:start < /* Select the top half (or left half) or scrollbar track individually */ >::-webkit-scrollbar-thumb:window-inactive < /* Select the thumb when the browser window isn't in focus */ >::-webkit-scrollbar-button:horizontal:decrement:hover < /* Select the down or left scroll button when it's being hovered by the mouse */ >

::-webkit-scrollbar < width: 12px; >::-webkit-scrollbar-track < -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; >::-webkit-scrollbar-thumb

In which we’d get this on a simple div with vertically overflowing text:

Check out the very subtle and nice scrollbars on Tim Van Damme’s blog Maxvoltar (Update September 2012: Tim’s site no longer uses this design): The particularly nice bit here is that the scrollbar is on the body element, yet the scrollbar isn’t stuck to the top, bottom, or right edge of the browser window as scroll bars normally are. I made a test page with copy-and-pasteable code to achieve that a similar effect: View Demo On Forrst, they use custom scollbars on code snippets which are also pretty nice. They are less visually intense and so don’t fight as much with the code highlighting.

• Dion Almaer has a useful little “debug” page for scrollbars with all the parts in bold colors to see what’s what. (from this article)
• Similar article on Beautiful Pixels.
• Google Wave went kinda overboard with them back when that was still a thing.

Источник