Помогите, плиз, изменить классический вид вертикального scrollа на обычную тонкую линию.
<div class="scroll>
<p>
// тескт
</p>
</div>
<style>
.scroll{
overflow: scroll;
overflow-x: unset;
}
</style>
Вот смотри, вроде все учел. Цвета/размеры меняй как пожелаешь 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;
}
}
Насколько я помню, webkit-стилизация не работает в IE, Edge и Firefox. Посему, если нужно кроссбраузерное решение, лучше использовать скрипты. На сегодняшний день существует множество решений на JS, от себя могу порекомендовать Malihu custom scrollbar
Готовых стилей для него предостаточно + всегда можно настроить вывод с помощью обычного CSS.
Накидал пример с его использованием - https://jsfiddle.net/Denisdude/rL8sqv9w/
$(".scroll-content").mCustomScrollbar();
Главное, не забудьте дать контейнеру максимальную высоту и подключить все файлы плагина.
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
возникла проблема, не могу понять в чем делоВерстаю в VS code изменения в life server
К чему может привести, или вообще ни к чему не приведёт, задание размера статического массива значением, которое станет известно лишь на этапе...