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

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

попробовать

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

Простая Установка

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

  function() { 

    $("html").niceScroll();

  }

);
</script>

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

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

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

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

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

• IE11 - > IE6
• IE10-WP8
• IE9-WP7
• IE Xbox One
• IE Xbox 360
• Google Хром
• FireFox
• Опера
• Safari

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

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

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

выход:

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

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

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

   #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

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

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

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

Я просто нашел полезным удалить стрелки из полос прокрутки. по состоянию на 2015 год он был использован в maps.google.com при поиске мест в списке результатов в it's material design ПОЛЬЗОВАТЕЛЬСКИЙ ИНТЕРФЕЙС.

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

поддержка на CHROME

вот демо для webkit scrollbar полоса прокрутки в WebKit демо

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

---

другой метод JQuery Scroll Bar Plugin

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

загрузите плагин из Скачать Тут

Как использовать и для большего количества опций ПРОВЕРЬТЕ ЭТО

демо

Я пробовал много JS и CSS scroll, и я обнаружил, что это было очень легко использовать и тестировать на 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 Custom полоса прокрутки

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

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

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

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

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 { // ... // }