it-swarm.com.ru

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

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

298
harisdev

Я подумал, что было бы полезно объединить последнюю информацию о полосах прокрутки, 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 draft ) и scrollbar-width ( W3C draft ). Некоторая хорошая информация о реализации может быть найдена в этот ответ .

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

Библиотеки и плагины 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;
}

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

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

654
JSuar

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

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

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

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

  function() { 

    $("html").niceScroll();

  }

);
</script>

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

12
Dilusha Gonagala

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

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

10
elclanrs

Я думаю, что в этой теме отсутствует одна вещь. Если вы случайно захотите реализовать прокрутку с помощью плагина, безусловно, лучшим в 2014 году будет Sly .

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

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

8
Capaj

Я перепробовал много плагинов, большинство из них не поддерживают все браузеры, я предпочитаю 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/
demo nanoScroller: http://jamesflorentino.github.io/nanoScrollerJS/

5
Ouadie

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

  • Последовательный стиль и функциональность в большинстве современных браузеров
  • Не какое-то нелепое раздутое расширение 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>

4
ne1410s

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

   #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

4
user7005809

Вот пример 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;
}

Результат:

enter image description here

3
Denys Wessels

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

jfk-scrollbar jfk-scrollbar-borderless jfk-scrollbar-dark

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

Я просто нашел это полезным, чтобы удалить стрелки с полос прокрутки. с 2015 года он использовался на maps.google.com при поиске мест в списке результатов в пользовательском интерфейсе дизайна материала.

2
le0diaz

Я пробовал много 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 Пользовательская полоса прокрутки

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

1
Yousef Altaf

Новая версия 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 scrollbar

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

1
Fatih Hayrioğlu

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

Поддерживает CHROME

Вот демо для полосы прокрутки webkit Демо полосы прокрутки Webkit

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


Другой метод - Jquery Scroll Bar Plugin

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

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

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

ДЕМО

1
Nikz
.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, как один.

1
csomakk

Существует способ, с помощью которого вы можете применять пользовательские полосы прокрутки к пользовательским элементам 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;
}
0
Adeel Imran