Про scroll и его внешний вид

87
03 октября 2021, 22:40

Помогите, плиз, изменить классический вид вертикального scrollа на обычную тонкую линию.

<div class="scroll>
     <p>
          // тескт
     </p>
</div> 
<style>
.scroll{
     overflow: scroll;
     overflow-x: unset;
}
</style>
Answer 1

Вот смотри, вроде все учел. Цвета/размеры меняй как пожелаешь https://jsfiddle.net/ge4fsukh/9

<div class="body">
  <p>Hello World</p>
  <br>
  <br>
    <textarea class="body" rows="5">
  lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem   lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem   lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem   lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem   lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem   lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem   lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem   lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem   lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem 
  </textarea>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
    <p>Hello World</p>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
    <p>Hello World</p>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
    <p>Hello World</p>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
    <p>Hello World</p>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <p>lalalalalalaa</p>
  <br>
</div>
.body {
  width: 100%;
}
$light-gray: #acacac !default;
$bg-gray: #ccc!default;
$medium-gray: #ddd !default;
$bg-gray: #bbb !default;
$scrollbar-size: 5px !default;
$scrollbar-size-textarea: 4px !default;

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 $scrollbar-size rgba($light-gray,0.3);
  background-color: $light-gray;
  overflow: hidden;
}
::-webkit-scrollbar {
  width: $scrollbar-size;
  height: $scrollbar-size;
  background-color: $light-gray;
}
::-webkit-scrollbar-thumb {
  background-color: $medium-gray;
}
select,
textarea {
  &::-webkit-scrollbar {
    width: $scrollbar-size-textarea;
    background-color: $bg-gray;
  }
  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 $scrollbar-size-textarea rgba($bg-gray,0.3);
    background-color: $bg-gray;
  }
}
Answer 2

Насколько я помню, webkit-стилизация не работает в IE, Edge и Firefox. Посему, если нужно кроссбраузерное решение, лучше использовать скрипты. На сегодняшний день существует множество решений на JS, от себя могу порекомендовать Malihu custom scrollbar

Готовых стилей для него предостаточно + всегда можно настроить вывод с помощью обычного CSS.

Накидал пример с его использованием - https://jsfiddle.net/Denisdude/rL8sqv9w/

$(".scroll-content").mCustomScrollbar();

Главное, не забудьте дать контейнеру максимальную высоту и подключить все файлы плагина.

READ ALSO
Браузеры не обновляют стили css

Браузеры не обновляют стили css

возникла проблема, не могу понять в чем делоВерстаю в VS code изменения в life server

153
Преобразование из css в scss

Преобразование из css в scss

Какая запись в scss будет эквивалента данной записи в css?

173
Взаимодействие select и input

Взаимодействие select и input

У меня есть следующий select:

85
Задание размера статического массива run-time значением

Задание размера статического массива run-time значением

К чему может привести, или вообще ни к чему не приведёт, задание размера статического массива значением, которое станет известно лишь на этапе...

276