Красивый скроллбар (scrollbar)

Чтобы на сайте сделать современный, красивый скроллбар (он же scrollbar) необходимо минимум кода CSS. Меняя цвета на своё усмотрение можно на своем сайте показывать красивый скролл.

И не нужно его прятать и избегать, так как он вписывается в общий дизайн сайта.

Код CSS для стилизации srollbar

div.scrollbar_castom::-webkit-scrollbar {
	width: 15px;
	border-radius: 10px;
	background-color: transparent;
}
div.scrollbar_castom::-webkit-scrollbar-thumb {
	border-radius: 15px;
	background-color: #eeefc8;
	border-right: 4px solid #fdfdf7;
	border-left: 4px solid #fdfdf7;
}
div.scrollbar_castom::-webkit-scrollbar-track {
	border-radius: 10px;
	background-color: transparent;
}
div.scrollbar_castom::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}

div.scrollbar_castom::-webkit-scrollbar {

width: 15px;

border-radius: 10px;

background-color: transparent;

}

div.scrollbar_castom::-webkit-scrollbar-thumb {

border-radius: 15px;

background-color: #eeefc8;

border-right: 4px solid #fdfdf7;

border-left: 4px solid #fdfdf7;

}

div.scrollbar_castom::-webkit-scrollbar-track {

border-radius: 10px;

background-color: transparent;

}

div.scrollbar_castom::-webkit-scrollbar-thumb:hover {

background-color: #a8bbbf;

}

Рекомендуем еще эти статьи

22.06.2022

Открытие вкладок по якорным ссылкам в Oxygen

Чтобы разрешить хеш-ссылки (hash links) для открытия вкладок (tabs) в Oxygen нужно проделать следующее. Так как по умолчанию это не работает.

30.06.2023

Woocommerce - не обновляется общая сумма заказа на странице корзины

После обновления Woocommerce до версии 7.8, перестала пересчитывается общая сумма заказа, когда меняем количество товаров...

26.06.2023

Вывод файлов на страницу, которые лежат в определенной папке

Задача: Есть страница, у неё дочерние страницы. На этих страницах необходимо выводить список PDF файлов,...

05.09.2023

Работа с cookies на jQuery

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

15.06.2021

Woocommerce, оформление заказа - убрать таблицу или заменить

Чтобы на странице оформления заказа убрать итоговую таблицу, это иногда надо, когда совмещается корзина и...

28.05.2020

Удалить поле URL (сайт) из формы комментариев в WordPress

Записываем в functions.php следующий код

// Удаляем URL из формы отправки комментариев
add_filter('comment_form_default_fields', 'sheens_unset_url_field');
function sheens_unset_url_field ( $fields ) {
  if ( isset($fields['url'] ))
  unset ( $fields['url'] );
  return $fields;
}

// Удаляем URL из формы отправки комментариев

add_filter('comment_form_default_fields', 'sheens_unset_url_field');

function sheens_unset_url_field ( $fields ) {

if ( isset($fields['url'] ))

unset ( $fields['url'] );

return $fields;

}

Если не сработает, то, скорее всего, в теме есть...