CODEWITHSUNDEEP
javascripthtmlcssscrollbaroverflow
Tonio Hiraki
Tonio Hiraki

Reputation: 152

How to place the scrollbar outside of div?

I set overflow: auto on the div. The width of the div is decreased when the scrollbar is displayed, but I want to maintain the width of div. How can I achieve this?

Upvotes: 1

Views: 4422

Answers (1)

ulou
ulou

Reputation: 5853

EDIT 2024 July

Now this feature is supported in all browsers (link):

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Actual answer

Instead of overflow: scrollbar, use overflow: overlay (link):

Behaves the same as auto, but with the scrollbars drawn on top of content instead of taking up space. Only supported in WebKit-based (e.g., Safari) and Blink-based (e.g., Chrome or Opera) browsers.

Additionally

Scrollbar (overflow: scrollbar) is taking divs width, however, you can customize scrollbar, even hide it (How to style scrollbar):

body {
  height: 250vh;
}

/* width */
::-webkit-scrollbar {
  width: 15px; /* you can shrink taken width */
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: red; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

Upvotes: 4

Related Questions