CSS: Possible to "Push" Webkit Scrollbars into Content

CSS: Possible to push Webkit scrollbars into content?

I think thats not possible by assigning a right margin to a right-aligned scrollbar. The scrollbar is part of the window-UI and may not be styled via CSS.

However you can just create an content-wrapper around all other elements of your HTML, give it a max-width, which is smaller then 100% and set overflow: scroll; for the wrapper. This will achieve the desired effect and work in nearly all browsers.

[personal opinion] I think it's a very bad habit of certain web-designers, who want to control every piece of my screen. For example the scrollbars should be styled by the window-manager not by the website I'm currently viewing.

Text in a webkit scrollbar

Not possible using native scrollbars, as they are not proper HTML elements and browsers take turns at not allowing them to be styled in the name of usability and accessibility. But totally possible using a scrollbar plugin.

My personal favorite (for a number of reasons): simplebar.

window.SimpleBar = new SimpleBar(document.querySelector('[data-scrollbar]'),{ autoHide: false });window.onresize = function() {  window.SimpleBar.recalculate();}

body {  padding: 0;margin:0;  overflow: hidden;}body>[data-scrollbar] {  height: 100vh;  width: 100vw;}
body>[data-scrollbar] .spacer {  height: 200vh;}
body>[data-scrollbar] .simplebar-track.vertical::before {  position: absolute;  content: 'scrollbar';  width: 1px;  word-break: break-all;  top: 50%;  transform: translateY(-50%);  z-index:3}

<link rel="stylesheet" href="https://unpkg.com/simplebar@2.0.3/umd/simplebar.css" /><script src="https://unpkg.com/simplebar@2.0.3/umd/simplebar.js"></script>
<body>  <div data-scrollbar>    <div class="spacer"></div>  </div></body>

use transition on ::-webkit-scrollbar?

A clean solution can be achieved by animating a CSS variable that is used in the background. Note that to be able to animate CSS variables you need to set them using @property.

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

@property --var1 {
  syntax: "<color>";
  inherits: true;
  initial-value: white;
}

@keyframes fadeIn {
  0% {
    --var1: white;
  }

  100% {
    --var1: #aaa;
  }
}

@keyframes fadeOut {
  0% {
    --var1: #aaa;
  }

  100% {
    --var1: white;
  }
}

.container {
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  animation: fadeOut .5s ease-in-out forwards;
}

.container:hover {
  animation: fadeIn .5s ease-in-out forwards;
}

.container::-webkit-scrollbar {
  background: white;
  width: 8px;
}

.container::-webkit-scrollbar-thumb {
  background: var(--var1);
  border-radius: 4px;
}

<div class="container">
  test
  <div style="height: 1000px; width:100%;"></div>
</div>

How to prevent a webkit-scrollbar from pushing over the contents of a div?

Hm.. I can't think of a way to get the webkit scrollbar in overlay. One solution to stop the line breaking is to hide the scrollbar with

.box2::-webkit-scrollbar {
  height: 16px;
  overflow: visible;
  width: 16px;
  display: none;
}

other you can set the width of your UL to the same as the box so it makes use of the overflow function and displays under the scrollbar

.box ul {
  width: 149px;
}

How to add arrows with -webkit-scrollbar-button

(Super late to the party, but still)

You can style scrollbar buttons using ::-webkit-scrollbar-button selector (see this blog post for a full breakdown on the webkit scrollbar pseudo selectors), but getting them to show arrows is much trickier, and most people seem to either use background images or skip buttons altogether.

Here's a solution using CSS triangles for arrows:

https://stackoverflow.com/a/46229219/1202275

and another one (based on the one above, vertical scrollbar only but the idea is the same):

::-webkit-scrollbar {
  width: 16px;
  border: 5px solid white;

}

::-webkit-scrollbar-thumb {
  background-color: #b0b0b0;
  background-clip: padding-box;
  border: 0.05em solid #eeeeee;
}

::-webkit-scrollbar-track {
  background-color: #bbbbbb;
}
/* Buttons */
::-webkit-scrollbar-button:single-button {
  background-color: #bbbbbb;
  display: block;
  border-style: solid;
  height: 13px;
  width: 16px;
}
/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent #555555 transparent;
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
  border-color: transparent transparent #777777 transparent;
}
/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
  border-width: 8px 8px 0 8px;
  border-color: #555555 transparent transparent transparent;
}

::-webkit-scrollbar-button:vertical:single-button:increment:hover {
  border-color: #777777 transparent transparent transparent;
}

(https://codepen.io/DarthVeyda/pen/eLLbXa)

Apply webkit scrollbar style to specified element

Your idea was correct. However, the notation div ::-webkit-scrollbar with a space after div is actually the same as div *::-webkit-scrollbar; this selector means "scrollbar of any element inside <div>". Use div::-webkit-scrollbar.

See demo at http://jsfiddle.net/4xMUB/2/

CSS: Possible to "Push" Webkit Scrollbars into Content