CSS настраиваемая полоса прокрутки в div

327

Как настроить полосу прокрутки с помощью CSS (каскадные таблицы стилей) для одной, divа не для всей страницы?

css  html  scrollbar 
— harisdev
источник
Применитесь overflow:auto;только к этому <div>. Есть еще детали фона?
— Роб Вт
Я сделал это, но мне нужна пользовательская полоса прокрутки, хм .. дизайн полосы прокрутки
— harisdev
Пользовательский цвет? Это поддерживается только в IE, а не в других современных браузерах. Этого нельзя достичь с помощью чистого CSS.
— Роб Вт
1
Простейшее решение JS (CSS не поддерживает кросс-браузер) - yaireo.github.io/fakescroll
— vsync
Смотрите мой ответ здесь: stackoverflow.com/questions/7357203/custom-scrollbars/…
— Buzinas

Ответы:

688

Я подумал, что было бы полезно объединить последнюю информацию о полосах прокрутки, CSS и совместимости браузера.

Поддержка полосы прокрутки CSS

В настоящее время не существует кросс-браузерной полосы прокрутки с определениями стилей CSS. Статья W3C, о которой я упоминаю в конце, содержит следующее утверждение и была недавно обновлена ​​(10 октября 2014 года):

Некоторые браузеры (IE, Konqueror) поддерживают нестандартные свойства 'scrollbar-shadow-color', 'scrollbar-track-color' и другие. Эти свойства недопустимы: они не определены ни в какой спецификации CSS и не помечены как проприетарные (с помощью префикса «-vendor-»)

Microsoft

Как уже упоминалось, Microsoft поддерживает стили прокрутки, но только для IE8 и выше.

Пример:

<!-- language: lang-css -->

    .TA {
        scrollbar-3dlight-color:gold;
        scrollbar-arrow-color:blue;
        scrollbar-base-color:;
        scrollbar-darkshadow-color:blue;
        scrollbar-face-color:;
        scrollbar-highlight-color:;
        scrollbar-shadow-color:
    }

Chrome & Safari (WebKit)

Аналогично, WebKit теперь имеет свою собственную версию:

Firefox (Геккон)

Начиная с версии 64 Firefox поддерживает стилизацию полосы прокрутки через свойства scrollbar-color(частично, черновик W3C ) и scrollbar-width( черновик W3C ). Некоторая хорошая информация о реализации может быть найдена в этом ответе .

Кросс-браузерная прокрутка

Библиотеки и плагины JavaScript могут предоставить кросс-браузерное решение. Есть много вариантов.

Список можно продолжать. Лучше всего искать, исследовать и тестировать доступные решения. Я уверен, что вы сможете найти то, что соответствует вашим потребностям.

Предотвратить незаконную стилизацию полосы прокрутки

На всякий случай, если вы хотите предотвратить стилизацию полосы прокрутки, для которой не был правильно указан префикс «-vendor», в этой статье на W3C представлены некоторые основные инструкции . По сути, вам нужно добавить следующий CSS в таблицу стилей пользователя, связанную с вашим браузером. Эти определения будут переопределять недопустимый стиль полосы прокрутки на любой странице, которую вы посещаете.

body, html {
  scrollbar-face-color: ThreeDFace !important;
  scrollbar-shadow-color: ThreeDDarkShadow !important;
  scrollbar-highlight-color: ThreeDHighlight !important;
  scrollbar-3dlight-color: ThreeDLightShadow !important;
  scrollbar-darkshadow-color: ThreeDDarkShadow !important;
  scrollbar-track-color: Scrollbar !important;
  scrollbar-arrow-color: ButtonText !important;
}

Дубликаты или похожие вопросы / Источник не связан выше

Примечание. Этот ответ содержит информацию из разных источников. Если был использован источник, то он также связан в этом ответе.

— JSuar
источник
228
Сеть существует уже более двух десятилетий, и до сих пор не существует стандартного способа оформления полос прокрутки. Двадцать лет комитетов по стандартам не замечали, что люди прокручивают вещи. Нет медленных, саркастических хлопков, которые бы адекватно выражали то, что я чувствую. Но 20-летняя задержка между первым и вторым хлопком, я думаю, была бы уместной. С какой-то точки зрения, я еще не родился, когда вышел WWW, и теперь я компьютерный инженер. Путь, W3C.
— Парфянский выстрел
3
Просто добавьте два моих цента: Gmail и Youtube имеют стилизованную полосу прокрутки в Chrome, а родную - в Explorer и Firefox. Если эти стандарты достаточно хороши для них, то и для меня это тоже достаточно
— yonatanmn
9
@ PaulD.Waite Ну, может быть, но это может относиться ко всему. А CSS существует как язык именно для того, чтобы дизайнеры могли изменить значения по умолчанию. Вся идея в том, что плохой дизайнер пользовательского интерфейса может сделать любой элемент неинтуитивным, но как только вы предполагаете, что дизайнер сайта некомпетентен, какой смысл вообще разрешать настройку страницы?
— Парфянский выстрел
6
@ PaulD.Waite Понятно, что это не одна из тех вещей. Во всяком случае, отчасти потому, что он находится в области экрана, которую дизайнер сайта должен полностью контролировать, поэтому он не представляет угрозы безопасности, а отчасти потому, что на практике это явно не проблема. Многие сайты реализуют свои собственные хаки, чтобы вещи выглядели и вели себя как полосы прокрутки, и они работают нормально. Они не только хорошо работают и выглядят лучше, но люди действительно понимают, как их использовать, и в этом суть. К сожалению, из-за того, что они хаки, иногда они не будут хорошо играть с такими вещами, как функциональность печати.
— Парфянский выстрел
5
Этот ответ не полностью отвечает на его вопрос, который заключался в том, как применить стили полосы прокрутки к определенному элементу div , а не ко всей странице.
— Стюарт
14

Дайте это попробовать

Источник: https://nicescroll.areaaperta.com/

Простая реализация 

<script type="text/javascript">
 $(document).ready(

  function() { 

    $("html").niceScroll();

  }

);
</script>

Это полоса прокрутки плагина jQuery, поэтому ваши полосы прокрутки управляемы и выглядят одинаково для разных ОС.

— Дилуша Гонагала
источник
Я уверен, что это, вероятно, настраиваемый, но демонстрация на их странице прокручивается слишком медленно, а полосу прокрутки слишком сложно захватить.
— Гусь
4
Как и практически все плагины jQuery - [дрожь] - это очень медленно по сравнению с нативными, многопоточными и ускоренными реализациями прокрутки на GPU. Абсолютно не подходит для серьезных приложений и мешает хорошему UX. Я бы порекомендовал вам избегать этого, если это не для игрушечного веб-сайта.
— Джон Вайс
2
Я ненавижу, когда люди называют что-то чистым javascript, а затем BAM! плагин jquery.
— Динь ​​Чан
Я бы не рекомендовал использовать nicescroll, поскольку он отключает функции браузера. Прокрутка с помощью среднего щелчка не работает с Nicescroll.
— Aloso
люблю этот niceScroll, он не добавляет обертку div вокруг элемента, что означает, что он не нарушает структуру HTML
— datdinhquoc
11

Пользовательские полосы прокрутки невозможны в CSS, вам понадобится немного магии JavaScript.

Некоторые браузеры поддерживают нестандартные правила CSS, например, ::-webkit-scrollbarв Webkit, но не идеальны, поскольку будут работать только в Webkit. У IE тоже было что-то подобное, но я не думаю, что они поддерживают это больше.

— elclanrs
источник
2
устаревший ответ
— T.Todua
1
@ T.Todua Что устарело в этом ответе?
— kojow7
6

Как и многие люди, я искал что-то, что было:

  • Последовательный стиль и функциональность в большинстве современных браузеров
  • Не какое-то нелепое раздутое расширение jQuery на 3000 строк cr * p

... но увы - ничего!

Ну, если работа того стоит ... Я смог кое-что запустить и запустить примерно за 30 минут. Отказ от ответственности: есть довольно много известных (и, возможно, еще немного неизвестных) проблем с этим, но это заставляет меня задаться вопросом, для чего на Земле другие 2920 линий JS существуют во многих предложениях!

var dragParams;
	window.addEventListener('load', init_myscroll);

	/* TODO: Much to do for v axis! */

	function bardrag_mousemove(e) {
	  var pos = (e.clientX - dragParams.clientX) + dragParams.offsetLeft;
	  pos = Math.min(Math.max(0, pos), dragParams.maxLeft);
	  dragParams.slider.style.left = pos + 'px';
	  updateScrollPosition(dragParams.slider, pos);
	}

	function updateScrollPosition(slider, offsetVal) {
	  var bar = slider.parentNode;
	  var myscroll = bar.parentNode;
	  var maxView = myscroll.scrollWidth - myscroll.offsetWidth;
	  var maxSlide = bar.offsetWidth - slider.offsetWidth;
	  var viewX = maxView * offsetVal / maxSlide;
	  myscroll.scrollLeft = viewX;
	  bar.style.left = viewX + 'px';
	}

	function drag_start(e) {
	  var slider = e.target;
	  var maxLeft = slider.parentNode.offsetWidth - slider.offsetWidth;
	  dragParams = {
	    clientX: e.clientX,
	    offsetLeft: slider.offsetLeft,
	    slider: e.target,
	    maxLeft: maxLeft
	  };
	  e.preventDefault();
	  document.addEventListener('mousemove', bardrag_mousemove);
	}

	function drag_end(e) {
	  e.stopPropagation();
	  document.removeEventListener('mousemove', bardrag_mousemove);
	}

	function bar_clicked(e) {
	  var bar = e.target;
	  var slider = bar.getElementsByClassName('slider')[0];
	  if (bar.className == 'h bar') {
	    var maxSlide = bar.offsetWidth - slider.offsetWidth;
	    var sliderX = e.offsetX - (slider.offsetWidth / 2);
	    sliderX = Math.max(0, Math.min(sliderX, maxSlide));
	    slider.style.left = sliderX + 'px';
	    updateScrollPosition(slider, sliderX);
	  }
	}

	function init_myscroll() {
	  var myscrolls = document.getElementsByClassName('container');
	  for (var i = 0; i < myscrolls.length; i++) {
	    var myscroll = myscrolls[i];
	    var style = window.getComputedStyle(myscroll);
	    if (style.overflowY == 'scroll' || (style.overflowY == 'auto' && myscroll.offsetHeight < myscroll.scrollHeight)) {
	      addScroller(false, myscroll);
	    }
	    if (style.overflowX == 'scroll' || (style.overflowX == 'auto' && myscroll.offsetWidth < myscroll.scrollWidth)) {
	      addScroller(true, myscroll);
	    }
	  }
	}

	function addScroller(isX, myscroll) {
	  myscroll.className += ' myscroll';
	  var bar = document.createElement('div');
	  var slider = document.createElement('div');
	  var offsetDim = isX ? myscroll.offsetWidth : myscroll.offsetHeight;
	  var scrollDim = isX ? myscroll.scrollWidth : myscroll.scrollHeight;
	  var sliderPx = Math.max(30, (offsetDim * offsetDim / scrollDim));
	  slider.style.width = 100 * sliderPx / offsetDim + '%';
	  slider.className = 'slider';
	  bar.className = isX ? 'h bar' : 'v bar';
	  bar.appendChild(slider);
	  myscroll.appendChild(bar);

	  bar.addEventListener('click', bar_clicked);
	  slider.addEventListener('mousedown', drag_start);
	  slider.addEventListener('mouseup', drag_end);
	  bar.addEventListener('mouseup', drag_end);
	  document.addEventListener('mouseup', drag_end);
	}
body {
  background-color: #66f;
}
.container {
  background-color: #fff;
  width: 50%;
  margin: auto;
  overflow: auto;
}
.container > div:first-of-type {
  width: 300%;
  height: 100px;
  background: linear-gradient(to right, red, yellow);
}
/* TODO: Much to do for v axis! */

.myscroll {
  overflow: hidden;
  position: relative;
}
.myscroll .bar {
  background-color: lightgrey;
  position: absolute;
}
.myscroll {
  padding-bottom: 20px;
}
.myscroll .h {
  height: 20px;
  width: 100%;
  bottom: 0;
  left: 0;
}
.myscroll .slider {
  background-color: grey;
  position: absolute;
}
.myscroll .h .slider {
  height: 100%;
}
<div class="container">
  <div></div>
</div>
Развернуть фрагмент

— ne1410s
источник
1
фон: линейный градиент (справа, красный, желтый);
— xgqfrms
5

Я перепробовал много плагинов, большинство из них не поддерживают все браузеры, я предпочитаю iScroll, и nanoScroller работает для всех этих браузеров:

  • IE11 -> IE6
  • IE10 - WP8
  • IE9 - WP7
  • IE Xbox One
  • IE Xbox 360
  • Гугл Хром
  • Fire Fox
  • опера
  • Сафари

Но iScroll не работает с сенсорным!

демо iScroll : http://lab.cubiq.org/iscroll/examples/simple/
демо nanoScroller : http://jamesflorentino.github.io/nanoScrollerJS/

— Ouadie
источник
Нано-скроллер не поддерживает горизонтальную прокрутку.
— FlavorScape,
Репозиторий заархивирован github.com/cubiq/iscroll Я бы предложил поискать другие альтернативы
— Уади
5

Пожалуйста, проверьте эту ссылку. Пример с рабочим демо

   #style-1::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

CSS Scroll Bars

2
Спасибо за демо. Сначала я запустил его с Firefox 58.0.2 (64-разрядная версия, Windows 7 Pro / 64), и все его полосы прокрутки были идентичны. Затем работал с Chrome версии 65.0.3325.162 (Официальная сборка) (64-разрядная версия), и все они были разными. Итак (возможно, непреднамеренно) вы продемонстрировали ограничения -webkit-подхода.
— КОД-ЧИТАНИЕ
4

Новая версия Firefox (64) поддерживает CSS Scrollbars Модуль Уровень 1 

.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}
<div class="scroller">
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi
welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</div>
Развернуть фрагмент

Источник: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars

Полоса прокрутки Firefox

https://codepen.io/fatihhayri/pen/pqdrbd

— Фатих Хайриоглу
источник
3

Вот пример webkit, который работает для Chrome и Safari:

CSS:

::-webkit-scrollbar 
{
    width: 40px;
    background-color:#4F4F4F;
}

::-webkit-scrollbar-button:vertical:increment 
{
    height:40px;
    background-image: url(/Images/Scrollbar/decrement.png);
    background-size:39px 30px;
    background-repeat:no-repeat;
}

::-webkit-scrollbar-button:vertical:decrement 
{
    height:40px;
    background-image: url(/Images/Scrollbar/increment.png);    
    background-size:39px 30px;
    background-repeat:no-repeat;
}

Вывод:

введите описание изображения здесь

— Денис Вессельс
источник
3 
.className::-webkit-scrollbar {
  width: 10px;
  background-color: rgba(0,0,0,0);
}

.className::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
}

дал мне хороший мобильный телефон / OSX, как один.

— csomakk
источник
1
Более краткий ответ. ИМХО, на самом деле он ответил на вопрос ОП, который заключался в том, как оформить только один div. Ницца.
— Данимал Рекс
2

Существует способ, с помощью которого вы можете применять пользовательские полосы прокрутки к пользовательским элементам div в ваших документах HTML. Вот пример, который помогает. https://codepen.io/adeelibr/pen/dKqZNb Но как суть. Вы можете сделать что-то вроде этого.

<div class="scrollbar" id="style-1">
  <div class="force-overflow"></div>
</div>

Файл CSS выглядит следующим образом.

.scrollbar
{
  margin-left: 30px;
  float: left;
  height: 300px;
  width: 65px;
  background: #F5F5F5;
  overflow-y: scroll;
  margin-bottom: 25px;
}

.force-overflow
{
  min-height: 450px;
}

#style-1::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
  width: 12px;
  background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #555;
}
— Адель Имран
источник
2

Это то, что Google использовал в некоторых своих приложениях уже давно. Посмотрите в коде, что если вы применяете следующие классы, они как-то скрывают полосу прокрутки в Chrome, но она все еще работает.

Классы jfk-scrollbar, jfk-scrollbar-borderlessиjfk-scrollbar-dark

.testg{ border:1px solid black;  max-height:150px;  overflow-y: scroll; overflow-x: hidden; width: 250px;}
.content{ height: 700px}

/* The google css code for scrollbars */
::-webkit-scrollbar {
    height: 16px;
    overflow: visible;
    width: 16px
}
::-webkit-scrollbar-button {
    height: 0;
    width: 0
}
::-webkit-scrollbar-track {
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px
}
::-webkit-scrollbar-track:horizontal {
    border-width: 7px 0 0
}
::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1)
}
::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1)
}
::-webkit-scrollbar-track:active {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:active {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(255, 255, 255, .15)
}
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px;
    min-height: 28px;
    padding: 100px 0 0;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-thumb:horizontal {
    border-width: 7px 0 0;
    padding: 0 0 0 100px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .4);
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25)
}
::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .3);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:horizontal {
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset -1px 0 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, .6);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .37)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:active {
    background-color: rgba(255, 255, 255, .75);
    box-shadow: inset 1px 1px 3px rgba(255, 255, 255, .5)
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track:horizontal {
    border-width: 6px 0 1px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .035);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14), inset -1px -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-borderless.jfk-scrollbar-dark::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .07);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25), inset -1px -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-borderless::-webkit-scrollbar-thumb {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-thumb:horizontal {
    border-width: 6px 0 1px
}
::-webkit-scrollbar-corner {
    background: transparent
}
body::-webkit-scrollbar-track-piece {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 0 0 0 3px;
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
body::-webkit-scrollbar-track-piece:horizontal {
    border-width: 3px 0 0;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
body::-webkit-scrollbar-thumb {
    border-width: 1px 1px 1px 5px
}
body::-webkit-scrollbar-thumb:horizontal {
    border-width: 5px 1px 1px
}
body::-webkit-scrollbar-corner {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 3px 0 0 3px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14)
}
.jfk-scrollbar::-webkit-scrollbar {
    height: 16px;
    overflow: visible;
    width: 16px
}
.jfk-scrollbar::-webkit-scrollbar-button {
    height: 0;
    width: 0
}
.jfk-scrollbar::-webkit-scrollbar-track {
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px
}
.jfk-scrollbar::-webkit-scrollbar-track:horizontal {
    border-width: 7px 0 0
}
.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1)
}
.jfk-scrollbar::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1)
}
.jfk-scrollbar::-webkit-scrollbar-track:active {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:active {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px;
    min-height: 28px;
    padding: 100px 0 0;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    border-width: 7px 0 0;
    padding: 0 0 0 100px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .4);
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25)
}
.jfk-scrollbar::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .3);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset -1px 0 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, .6);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .37)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:active {
    background-color: rgba(255, 255, 255, .75);
    box-shadow: inset 1px 1px 3px rgba(255, 255, 255, .5)
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track:horizontal {
    border-width: 6px 0 1px
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .035);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14), inset -1px -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-borderless.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .07);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25), inset -1px -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-thumb {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    border-width: 6px 0 1px
}
.jfk-scrollbar::-webkit-scrollbar-corner {
    background: transparent
}
body.jfk-scrollbar::-webkit-scrollbar-track-piece {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 0 0 0 3px;
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
body.jfk-scrollbar::-webkit-scrollbar-track-piece:horizontal {
    border-width: 3px 0 0;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
body.jfk-scrollbar::-webkit-scrollbar-thumb {
    border-width: 1px 1px 1px 5px
}
body.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    border-width: 5px 1px 1px
}
body.jfk-scrollbar::-webkit-scrollbar-corner {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 3px 0 0 3px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14)
}
<div class="testg">
    <div class="content">
        Look Ma'  my scrollbars doesn't have arrows <br /><br />
        content, content, content <br /> content, content, content <br /> content, content, content s<br />  content, content, content <br/> content, content, content <br/> content, content, content d<br/>  content, content, content <br/> 
    </div>
</div>
<br/>
<div class="testg jfk-scrollbar jfk-scrollbar-borderless jfk-scrollbar-dark">
    <div class="content">
        Look Ma'  my scrollbars dissapear in chrome<br /><br />
        content, content, content <br /> content, content, content <br /> content, content, content s<br />  content, content, content <br/> content, content, content <br/> content, content, content d<br/>  content, content, content <br/> 
    </div>
</div>
Развернуть фрагмент

http://jsfiddle.net/76kcuem0/32/

Я просто нашел полезным убрать стрелки с полос прокрутки. С 2015 года он использовался в Картах Google при поиске мест в списке результатов в пользовательском интерфейсе дизайна материалов.

— le0diaz
источник
1

Полоса прокрутки Webkit не поддерживает большинство браузеров.

Подставки на ХРОМЕ

Вот демо для WebKit прокрутки Webkit Scrollbar DEMO

Если вы ищете больше примеров, проверьте это больше примеров

Другой метод - плагин Jquery Scroll Bar

Он поддерживает во всех браузерах и прост в применении

Скачайте плагин с Скачать здесь

Как использовать и для дополнительных опций ПРОВЕРИТЬ ЭТО

DEMO

— Nikz
источник
1

Я пробовал много JS и CSS прокрутки, и я обнаружил, что это было очень легко использовать и тестировать на IE, Safari и FF и работал нормально

КАК @thebluefox предлагает

Вот как это работает

Добавьте приведенный ниже скрипт в 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>

<script type="text/javascript" src="facescroll.js"></script>

<script type="text/javascript">
    jQuery(function(){ // on page DOM load
        $('#demo1').alternateScroll();
        $('#demo2').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });  
    })
</script>

И это здесь, в абзаце, где нужно прокрутить

<div id="demo1" style="width:300px; height:250px; padding:8px; resize:both; overflow:scroll">
**Your Paragraph Comes Here**
</div>

Для более подробной информации посетите страницу плагина

FaceScroll Пользовательская полоса прокрутки

Надеюсь, поможет

— Юсеф Альтаф
источник
0

Для людей, которые все еще ищут хорошее решение, я узнаю этот плагин simplebar

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

В моем случае я искал решения ActJS, автор также предоставляет обертки для реагирования, угловых, vue и следующих примеров.

— челмедведосвин
источник
0

Браузеры Webkit (такие как Chrome, Safari и Opera) поддерживают нестандартный псевдоэлемент :: - webkit-scrollbar , который позволяет нам изменять внешний вид полосы прокрутки браузера.

Примечание: :: - WebKit-полоса прокрутки не поддерживается Firefox или IE и Edge.

* {
  box-sizing: border-box;
  font-family: sans-serif;
}

div {
  width: 15rem;
  height: 8rem;
  padding: .5rem;
  border: 1px solid #aaa;
  margin-bottom: 1rem;
  overflow: auto;
}

.box::-webkit-scrollbar {
  width: .8em;
}

.box::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}
 
.box::-webkit-scrollbar-thumb {
  background-color: dodgerblue;
}
<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
</div>

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
</div>
Развернуть фрагмент

Ссылка: Как создать собственную полосу прокрутки

— Вишал
источник
0

Предположим, у вас есть div как 

<div class="custom_scroll"> ... </div>

Применить стили CSS как 

//custom scroll style definitions
.custom_scroll
{
  overflow-y: scroll;
}

//custom_scroll scrollbar styling
.custom_scroll::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    opacity: 0.5;
    //background-color: #F5F5F5;
}

.custom_scroll::-webkit-scrollbar
{
    width: 5px;
    opacity: 0.5;
    //background-color: #F5F5F5;
}

.custom_scroll::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    opacity: 0.5;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    //background-color: #555;
}

Результирующий свиток будет выглядеть как

введите описание изображения здесь

— Saumyajit
источник
-1

Или используйте что-то вроде этого:

var MiniScroll=function(a,b){function e(){c.scrollUpdate()}function f(){var a=new Date,b=Math.abs(a-c.animation.frame),d=c.countScrollHeight();c.animation.frame=a,c.render(b),d.height!=c.controls.height&&(e(),c.controls.height=d.height),requestAnimationFrame(f)}function g(){c.scrollUpdate()}function h(a){var b=c.target.scrollTop,d=Math.abs(a.wheelDeltaY/(10-c.speed));c.target.scrollTop=a.wheelDeltaY>0?b-d:b+d,c.scrollUpdate()}function i(a){if(a.target.classList.contains("scroll"))return a.preventDefault(),!1;var b=c.countScrollHeight();c.target.scrollTop=a.offsetY*b.mul-parseInt(b.height)/2,c.scrollUpdate()}b=b||{};var c=this,d={speed:"speed"in b?b.speed:7};this.target=document.querySelector(a),this.animation={frame:new Date,stack:[]},this.identity="scroll"+parseInt(1e5*Math.random()),this.controls={place:null,scroll:null,height:0},this.speed=d.speed,this.target.style.overflow="hidden",this.draw(),requestAnimationFrame(f),this.target.onscroll=g,this.target.addEventListener("wheel",h),this.controls.place.onclick=i};MiniScroll.prototype.scrollUpdate=function(){this.controls.place.style.height=this.target.offsetHeight+"px";var a=this.countScrollHeight();this.controls.scroll.style.height=a.height,this.controls.scroll.style.top=a.top},MiniScroll.prototype.countScrollHeight=function(){for(var a=this.target.childNodes,b=parseInt(this.target.offsetHeight),c=0,d=0;d<a.length;d++)a[d].id!=this.identity&&(c+=parseInt(a[d].offsetHeight)||0);var e=this.target.offsetHeight*parseFloat(1/(parseFloat(c)/this.target.offsetHeight)),f=this.controls.place.offsetHeight*(this.target.scrollTop/c)+"px";return{mul:c/this.target.offsetHeight,height:e>b?b+"px":e+"px",top:f}},MiniScroll.prototype.draw=function(){var a=document.createElement("div"),b=document.createElement("div");a.className="scroll-place",b.className="scroll",a.appendChild(b),a.id=this.identity,this.controls.place=a,this.controls.scroll=b,this.target.insertBefore(a,this.target.querySelector("*")),this.scrollUpdate()},MiniScroll.prototype.render=function(a){for(var b=0;b<this.animation.stack.length;b++){var c=this.animation.stack[b],d=parseInt(c.target);c.element.style[c.prop]=d+c.points}};

И инициализировать:

<body onload="new MiniScroll(this);"></body>

И настроить:

.scroll-place { // ... // }
.scroll { // ... // }
— Максим Владимирович
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.