Індивідуальна панель прокрутки CSS у розділі

327

Як я можу налаштувати смугу прокрутки за допомогою CSS (Каскадні таблиці стилів) для однієї, divа не для всієї сторінки?

css  html  scrollbar 
— харисдев
джерело
Застосовуйте overflow:auto;саме до цього <div>. Будь-які додаткові довідкові відомості?
— Роб Ш
Я це зробив, але мені потрібна спеціальна смуга прокрутки, ем .. дизайн прокрутки
— harisdev
Користувацький колір? Це підтримується лише в IE, а не в інших сучасних браузерах. Цього неможливо досягти за допомогою чистого CSS.
— Роб Ш
1
Найпростіше рішення JS (у CSS немає підтримки для перехресного браузера) - yaireo.github.io/fakescroll
— vsync
Дивіться моя відповідь тут: stackoverflow.com/questions/7357203/custom-scrollbars / ...
— Buzinas

Відповіді:

688

Я подумав, що було б корисно консолідувати останню інформацію про смуги прокрутки, CSS та сумісність браузера.

Підтримка CSS Bar

Наразі не існує жодних визначень CSS-стилів для прошивки між браузером. Стаття W3C, яку я згадую наприкінці, містить таке твердження і нещодавно оновилася (10 жовтня 2014 р.):

Деякі браузери (IE, Konqueror) підтримують нестандартні властивості "смуга прокрутки - колір тіні", "Колір смуги прокрутки" та інші. Ці властивості є незаконними: вони не визначені в жодній специфікації 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 (Gecko)

Станом на версію 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
джерело
227
В Інтернеті існує вже більше двох десятиліть, і досі не існує стандартного способу стилістики прокрутки. Двадцять років комітети зі стандартів не помічають, що люди прокручують речі. Немає швидкості повільного, саркастичного плескання, яка б адекватно виражала, як це викликає в мене почуття. Але 20-річна затримка між першим та другим плесканням, я думаю, підходить. З певної точки зору, я ще не народився, коли вийшла WWW, і зараз я інженер-комп’ютер. Шлях, W3C.
— Парфянський розстріл
3
Тільки, щоб додати два мої центи: Gmail та Youtube мають стилізовану смугу прокрутки в Chrome, а рідну - в Explorer та Firefox. Якщо ці стандарти досить хороші для них, це досить добре і для мене
— yonatanmn
9
@ PaulD.Waite Ну, можливо, але це можна застосувати до будь-чого. І CSS існує як мова саме для того, щоб дизайнери могли обрати перевагу за замовчуванням. Вся ідея полягає в тому, що поганий дизайнер інтерфейсу може зробити будь-який елемент неінтуїтивним, але як тільки ви вважаєте, що дизайнер веб-сайтів є некомпетентним, який сенс у взагалі дозволяти налаштувати сторінку?
— Парфянський розстріл
6
@ PaulD.Waite Ясно, що це не одна з таких речей. Почасти тому, що це знаходиться в області екрану, яку дизайнер сайту повинен повністю контролювати, так чи інакше, тому він не несе ризику для безпеки, а частково тому, що чітко - на практиці - це не проблема. Безліч сайтів реалізують свої власні хаки, щоб зробити речі, які виглядають і ведуть себе як полоси прокрутки, і вони працюють чудово. Вони не лише добре працюють і виглядають краще, але люди насправді розуміють, як ними користуватися, в чому справа. На жаль, оскільки вони хакі, іноді вони не будуть добре грати з такими речами, як функціональність друку.
— Парфянський розстріл
5
Ця відповідь не повністю стосується його питання, яке полягало в тому, як застосувати стилі прокрутки до певного розділу , а не на всю сторінку.
— Стюарт
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, він не додає обгортковий елемент навколо елемента, що означає, що він не порушує структуру html
— datdinhquoc
11

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

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

— еклани
джерело
2
застаріла відповідь
— Т.Тодуа
1
@ T.Todua Що застаріло в цій відповіді?
— kojow7
6

Як і багато людей, я шукав щось таке:

  • Послідовно стилізований та функціональний у більшості сучасних браузерів
  • Не якесь смішне 3000-лінійне розширене jQuery розширення 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
  • Гугл хром
  • FireFox
  • Опера
  • Сафарі

Але iScroll не працюють з дотиком!

демонстраційний iScroll : http://lab.cubiq.org/iscroll/examples/simple/
demo nanoScroller : http://jamesflorentino.github.io/nanoScrollerJS/

— Уадіе
джерело
нано-скроллер не підтримує горизонтальну прокрутку.
— FlavorScape
Репортаж архівовано github.com/cubiq/iscroll, я б запропонував шукати інші альтернативи
— Ouadie,
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

2
Дякую за демонстрацію. Я вперше запустив його з Firefox 58.0.2 (64-розрядні, Windows 7 Pro / 64), і всі його смуги прокрутки були однаковими. Потім працював із версією Chrome 65.0.3325.162 (Official Build) (64-розрядна версія), і всі вони були різними. Отже (можливо, ненавмисно) ви продемонстрували обмеження -webkit-підходу.
— CODE-READ
4

Нова версія Firefox (64) підтримує модуль прокрутки CSS, рівень 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

Ось приклад веб-файлів, який працює для 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
Більш коротка відповідь. IMHO він насправді відповів на питання ОП, яке полягало в тому, як створити стиль лише одного діва. Приємно.
— Danimal Reks
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 не підтримує більшість веб-переглядачів.

Підтримується на CHROME

Ось демонстрація смуги прокрутки веб-веб-сайтів Веб-панелі прокрутки DEMO

Якщо ви шукаєте більше прикладів, перегляньте це ще приклади

Ще один метод - плагін Jquery Scroll Bar

Він підтримує у всіх браузерах і простий у застосуванні

Завантажте плагін із завантаження тут

Як користуватися та для отримання додаткових опцій ПРОВЕРИТИ ЦЕ

DEMO

— Нікз
джерело
1

Я спробував багато прокрутки JS та CSS, і я виявив, що це було дуже просто у використанні та протестовано на IE та Safari та FF, і добре працював

AS @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

Для людей, які все ще шукають хорошого рішення, я просто знаходжу цей плагін простий панелі

Спеціальні прокрутки ванільної бібліотеки javascript з рідною прокруткою, виконані простою, легкою, простою у користуванні та крос-браузером.

У моєму випадку я шукав рішення reakctJS, автор також надає обгортки для реагування, кутового, vue та наступних прикладів

— ManBearPig
джерело
0

Веб-браузери (такі як 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.