Как сделать скролл на сайте html css

Руководство по стилизации скроллбара (полосы прокрутки) в CSS

В этой статье мы рассмотрим несколько способов стилизации скроллбара в CSS, в разных браузерах, чтобы вы могли настроить скроллбар по умолчанию в соответствии с вашим брендом или дизайном.

Полоса прокрутки или скроллбар браузера по умолчанию в большинстве случаев работает хорошо. Однако, если оставить её как есть, даже самые красивые сайты могут выглядеть незавершёнными и неотшлифованными. С помощью стилизации скроллбара можно создать более визуально привлекательный сайт, который будет лучше соответствовать вашему бренду или дизайну. В этом руководстве мы рассмотрим несколько различных способов стилизации скроллбара в CSS.

Знакомство со скроллбаром

Скроллбар — это часто упускаемый из виду элемент веб-дизайна. Хотя она может показаться незначительной деталью, она играет важную роль в навигации сайта. Стандартный скроллбар часто бывает скучной и может выглядеть неуместно, нарушая общую эстетику. К счастью, вы можете легко настроить скроллбар с помощью CSS. Для этого потребуется написать два набора правил CSS для браузеров Webkit, таких, как Chrome, Edge, Safari и Firefox.

Прежде чем погрузиться в код, давайте убедимся, что мы понимаем структуру скроллбара. Знание этого поможет при создании стиля с помощью CSS, так как вы можете использовать различные свойства для выделения определённых частей полосы прокрутки (скроллбара). Ниже перечислены элементы, из которых состоит скроллбар:

Бегунок: Подвижная часть скроллбара, представляющая текущую позицию содержимого. Его можно нажать и перетащить для прокрутки содержимого вверх или вниз.
Дорожка: Область скроллбара, по которой перемещается бегунок. Она представляет собой всю длину содержимого.
Кнопки со стрелками: Расположенные в верхней и нижней части дорожки скроллбара, кнопки со стрелками можно нажимать для прокрутки содержимого.
Границы скроллбара: Линии, которые окружают элемент скроллбара.
Угол скроллбара: Пересечение между вертикальным и горизонтальным скроллбарами, когда оба присутствуют.

Стилизация скроллбара в Chrome, Edge и Safari

Браузеры Webkit позволяют настраивать скроллбар с помощью псевдоэлементов ::-webkit-scrollbar , ::-webkit-scrollbar-button , ::-webkit-scrollbar-thumb , ::-webkit-scrollbar-track и других. Каждый из них нацелен на различные части скроллбара, как указано выше. В CodePen ниже показан пример стилизованного скроллбара с использованием вышеуказанных псевдоэлементов:

В приведённом выше коде мы отобразили вертикальный и горизонтальный скроллбары, но в большинстве случаев мы отобразили бы только одну. Для этого мы можем изменить свойство overflow , которое отвечает за видимость скроллбара, на overflow-x или overflow-y , в зависимости от того, по какой оси мы будем отображать скроллбар. Однако для приведённого выше примера этого будет недостаточно, если мы не сделаем изображение отзывчивым, установив его ширину и высоту на 100% .

Селекторы псевдокласса скроллбара

Чтобы создать более индивидуальный дизайн, вы можете выбрать определённые элементы скроллбара и применить к ним стили, добавив псевдокласс к каждому псевдоэлементу. Ниже приведены некоторые из наиболее распространённых псевдоклассов:

:horizontal : Используется для придания стиля горизонтальному скроллбару, отличного от вертикального скроллбара. Например, вы можете задать другую ширину или цвет для горизонтальной скроллбара.
:vertical : Используется для стилизации в CSS вертикального скроллбара, отличной от горизонтального скроллбара.
:decrement : Применяется к кнопкам со стрелками в начале скроллбара. Используется для стилизации кнопки уменьшения или стрелки вверх для вертикального скроллбара и стрелки влево для горизонтального скроллбара.
:increment : Применяется к кнопке со стрелкой в конце скроллбара. Используется для стилизации кнопки увеличения или стрелки вниз для вертикального скроллбара и стрелки вправо для горизонтального скроллбара.
:start : Применяется к первым кнопкам и первому фрагменту дорожки скроллбара, которые находятся в верхней или левой части вертикального или горизонтального скроллбара соответственно
:end : Применяется к последнему фрагменту дорожки скроллбара, которые находятся внизу или справа вертикального, или горизонтального скроллбара, соответственно.

Ниже приведён пример, в котором используются все вышеперечисленные псевдоклассы, кроме :horizontal , чтобы придать вертикальному скроллбару другой вид:

В примере ниже используется псевдокласс :horizontal для вставки тени на дорожку горизонтального скроллбара:

Хотя спецификации Webkit для стилизации скроллбара работают нормально на момент написания статьи, W3C официально отказался от этой спецификации, и ожидается, что она будет постепенно выводиться из употребления.

Стилизация скроллбара в Firefox

Firefox не предлагает никаких продвинутых методов стилизации, как браузеры Webkit. На момент написания статьи доступны только свойства scrollbar-width и scrollbar-color , что является стандартом, определённым W3C CSS Scrollbars. Эти свойства можно использовать для стилизации ширины скроллбара, бегунка и цвета дорожки:

body  
scrollbar-width: thin; 
scrollbar-color: #4d7fff #ddd; 
>

Стилизация скроллбара для большей поддержки кроссбраузерности

При оформлении скроллбара рекомендуется комбинировать спецификации Webkit и W3C CSS Scrollbars, чтобы охватить большее количество браузеров:

body  
scrollbar-width: thin; 
scrollbar-color: #4d7fff #ddd; 
> 
 
body::-webkit-scrollbar  
width: 10px; 
height: 10px; 
> 
 
body::-webkit-scrollbar-thumb  
background: linear-gradient(to bottom right, #4d7fff 0%, #1a56ff 100%); 
border-radius: 5px; 
> 
 
body::-webkit-scrollbar-track  
background-color: #ddd; 
border: 1px solid #ccc; 
> 
 
body::-webkit-scrollbar-button  
background-color: #4d7fff; 
border-radius: 5px; 
>

В браузерах WebKit правила, которые не распознаны, будут проигнорированы, и браузеры будут применять правила -webkit-scrollbar . С другой стороны, в браузерах Firefox правила, которые не распознаются, также будут игнорироваться, и браузеры будут применять правила CSS правила скроллбара. Таким образом, скроллбар сохранит свой стиль в большем количестве браузеров. Хотя недостатком является то, что в Firebox нет продвинутых методов стилизации, как в Webkit, вы сможете придать скроллбарам одинаковый вид.

Заключение

Стилизация скроллбара придаёт сайту более совершенный вид. Она также может помочь выделить бренд или продукт, включив его цветовую схему или логотип в дизайн скроллбара. Однако рекомендуется не слишком далеко отходить от первоначального вида скроллбара, чтобы не сделать её непривычной для пользователей и не снизить удобство пользования. Надеюсь, вам понравилась эта статья. Счастливого кодинга!

Как сделать скролл в блоке?

Для полноты реализации лучше использовать overflow для x,y:

или для постоянного скрола

overflow-y: scroll;

Отслеживать
ответ дан 18 окт 2018 в 11:16
187 8 8 бронзовых знаков

Нужно в css прописать «overflow: scroll»,также добавить необходимую ширину и высоту блоку.

Отслеживать
ответ дан 17 окт 2018 в 17:10
Алина Касымова Алина Касымова
224 1 1 серебряный знак 6 6 бронзовых знаков

css
bootstrap

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Как стилизовать или убрать полосу прокрутки — CSS скроллбар

Стилизованные полосы прокрутки становятся популярными, думаю, вы уже сталкивались с такими сайтами, которые имеют уникальный скроллбар (к примеру, наш сайт). Есть два способа реализации этой задачи: с помощью CSS3 или используя jQuery плагин. Мы будем использовать наиболее простой — напишем CSS стили.

полоса прокрутки css

Примечание: стилизовать полосу прокрутки через -webkit префикс возможно только в браузерах, использующих механизм рендеринга Webkit (и Blink). То есть в Firefox и IE этот способ не сработает.

Часто бывает необходимо убрать или скрыть скроллбар css совсем. Для начала, давайте рассмотрим как это сделать.

1 Как убрать полосу прокрутки CSS

Скрыть полосу прокрутки можно как у отдельного элемента на странице, так и у всей страницы целиком. Сделать это не сложно, достаточно написать следующее свойство:

CSS /*Убрать полосу прокрутки у элемента*/ .element::-webkit-scrollbar { width: 0; } /*Убрать полосу прокрутки для всей страницы*/ ::-webkit-scrollbar { width: 0; }

2 Как изменить скроллбар CSS

Теперь давайте рассмотрим базовую структуру полосы прокрутки:

стилизация полосы прокрутки

-webkit-scrollbar состоит различных псевдо-элементов.

::-webkit-scrollbar — это фон самого скроллбара.
::-webkit-scrollbar-button — кнопки направления на полосе прокрутки.
::-webkit-scrollbar-track — пустое пространство под индикатором прокрутки.
::-webkit-scrollbar-thumb — индикатор прокрутки, перетаскиваемый элемент.

Проверим как все это работает. Чтобы попробовать изменить скроллбар css, создадим пустой HTML документ. Вам необходимо добавить style.css ваш HTML файл. В разметку добавим div с id element, имеющий полосу прокрутки, чтобы применить на него наши стили.

HTML      Document

3 CSS стили

Для того, чтобы у элемента div появилась полоса прокрутки, добавим следующие свойства.

CSS #element { overflow-y: scroll; background-color: #ffffff; width: 200px; height: 200px; } .overflow { min-height: 400px; }

Теперь давайте используем псевдоэлемент для создания пользовательского скроллбара. Заменим ширину по умолчанию на новую — в 7 пикселей. Затем, добавим цвет полосы через свойство background-color: #f9f9fd .

Если вы хотите изменить ширину скролла всей страницы, а не отдельного элемента, то используйте ::-webkit-scrollbar без дополнительных селекторов.

CSS #element::-webkit-scrollbar { width: 7px; background-color: #f9f9fd; }

Ширина полосы в 7 пикселей

Мы уже знаем, что скроллбар состоит из полосы, кнопки и индикатора прокрутки. Используем псевдо элемент ::-webkit-scrollbar-thumb , для того чтобы стилизовать индикатор.

CSS #element::-webkit-scrollbar-thumb { background-color: #223c50; }

Изменение цвета индикатора

Добавим свойство box-shadow полосе, чтобы добавить скроллбару контрастность. Подобрать подходящую тень можно в нашем box-shadow генераторе.

CSS #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; }

Добавление внутренней тени

В заключении: вот еще несколько вариантов, которые вы можете использовать на своем сайте.

Пример 1
Пример 2
Пример 3
Пример 4

Пример 1 #element::-webkit-scrollbar { width: 10px; background-color: #f9f9fd; } #element::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #18aaaa; } #element::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); border-radius: 10px; background-color: #f9f9fd; }

Пример 2 #element::-webkit-scrollbar { width: 10px; } #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; } #element::-webkit-scrollbar-thumb { background-color: #f2bf93; background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .25) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .25) 50%, rgba(255, 255, 255, .25) 75%, transparent 75%, transparent); }

Пример 3 #element::-webkit-scrollbar { width: 10px; } #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; } #element::-webkit-scrollbar-thumb { background-color: #356184; background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .25)), color-stop(.5, transparent), to(transparent)); }

В четвертом примере мы используем градиент. Настроить его можно в CSS генераторе градиента.

Пример 4 #element::-webkit-scrollbar { width: 10px; } #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; border-radius: 10px; } #element::-webkit-scrollbar-thumb { border-radius: 10px; background: linear-gradient(180deg, #00c6fb, #005bea); }

Стилизация Скролла

Сегодня будем стилизовать скролл с помощью CSS для webkit браузеров (Google Chrome / Safari / Opera / Яндекс.Браузер) и Mozilla Firefox. А так же рассмотрим изменение скролла при помощи плагина mCustomScrollbar.

Стилизация скролла для Mozilla Firefox

Чтобы изменить скролл в Firefox, используйте следующий код.

html, body < scrollbar-color: #458245 #714826; /* «цвет ползунка» «цвет полосы скроллбара» */ scrollbar-width: auto | thin | none; /* толщина */ >

Первое значение scrollbar-color изменяет цвет ползунка, второе — цвет скроллбара.

Стилизация скролла в Mozilla Firefox

Значения scrollbar-width изменят толщину (ширину — для вертикального скроллбара, высоту — для горизонтального):

auto — толщина скролла по умолчанию;
thin — более тонкий вариант скролла;
none — скрыть скролл.

Пример. Обратите внимание, данный пример предназначен для просмотра в Firefox .

Выберите цвет скроллбара
Выберите цвет ползунка скроллбара
Выберите толщину скролла

Какой-то контент. Текст, изображения или что-то ещё.

Стилизация скролла для webkit браузеров

Чтобы стилизовать скролл для Google Chrome, Яндекс.Браузер, Safari и Opera используйте следующие CSS свойства.

/* полоса прокрутки (скроллбар) */ ::-webkit-scrollbar < width: 24px; /* ширина для вертикального скролла */ height: 8px; /* высота для горизонтального скролла */ background-color: #143861; >/* ползунок скроллбара */ ::-webkit-scrollbar-thumb < background-color: #843465; border-radius: 9em; box-shadow: inset 1px 1px 10px #f3faf7; >::-webkit-scrollbar-thumb:hover < background-color: #253861; >/* Стрелки */ ::-webkit-scrollbar-button:vertical:start:decrement < background: linear-gradient(120deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(240deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(0deg, #02141a 30%, rgba(0, 0, 0, 0) 31%); background-color: #f6f8f4; >::-webkit-scrollbar-button:vertical:end:increment < background: linear-gradient(300deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(60deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(180deg, #02141a 30%, rgba(0, 0, 0, 0) 31%); background-color: #f6f8f4; >::-webkit-scrollbar-button:horizontal:start:decrement < background: linear-gradient(30deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(150deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(270deg, #02141a 30%, rgba(0, 0, 0, 0) 31%); background-color: #f6f8f4; >::-webkit-scrollbar-button:horizontal:end:increment

mCustomScrollbar

Теперь рассмотрим, как кроссбраузерно стилизовать скролл при помощи плагина mCustomScrollbar.

Сначала скачайте архив и извлеките к себе в проект файлы:

jquery.mCustomScrollbar.min.css
jquery.mCustomScrollbar.concat.min.js
mCSB_buttons.png

Затем подключите jQuery и файлы плагина.

Или же можете подключить все файлы через CDN jsdelivr:

Инициализация

Инициализация через JavaScript

(function ($) < $(window).on("load", function () < $(".mycustom-scroll").mCustomScrollbar(); >); >)(jQuery);