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

100
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();

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

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте hersones.com.ua
ТОП-10
READ ALSO
Браузеры не обновляют стили css
CSS

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

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

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

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

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

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

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

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

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

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

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

 288