Скроллбар поверх страницы

Question

Помогите пожалуйста, как заставить скроллбар не отодвигать сайт, а отображатся поверх страницы? т.е. чтоб фоном была сама страница, и ездила по ней одна линь полоска.

::-webkit-scrollbar {
    width: .65em;
}

::-webkit-scrollbar-track {
    background-color: rgba(217, 217, 217, 0.0);
}

::-webkit-scrollbar-thumb {
    background: rgba(170, 170, 170, 0.6);
    border-radius: 5px;
    box-shadow: inset 0.05em 0.05em 0 rgba(0, 0, 0, 0.1), inset 0 -0.05em 0 rgba(0, 0, 0, 0.07);
}

Answer 1

Для десктопного Chrome можно задать overflow: overlay, но с ним надо быть осторожней - в некоторых источниках пишут, что такое значение устарело, хотя оно прекрасно работает пока.

Смотреть в Chrome:

::-webkit-scrollbar {
  height: .65em;
  width: .65em;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background-color: rgba(217, 217, 217, 0.0);
}

::-webkit-scrollbar-thumb,
::-webkit-resizer {
  background: rgba(170, 170, 170, 0.6);
  border-radius: 5px;
  box-shadow: inset 0.05em 0.05em 0 rgba(0, 0, 0, 0.1), inset 0 -0.05em 0 rgba(0, 0, 0, 0.07);
}

body {
  margin: 0;
  height: 200vh;
  width: 200vw;
  background: url('https://i.stack.imgur.com/m9kuJ.jpg');
 
  overflow: overlay;
}

Для остальных случаев, только полная кастомизация вкупе со скриптами.

БЛОГ НА HUSL

Скроллбар поверх страницы

Ответы (1 шт):