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

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

Solutions Collecting From Web of "CSS настраиваемая полоса прокрутки в div"

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

Поддержка CSS

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

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

Microsoft

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

Пример:

  .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 теперь есть своя версия:

  • Стилирование полос прокрутки: https://www.webkit.org/blog/363/styling-scrollbars/
  • Демонстрация всех стилей прокрутки WebKit
  • Из пользовательских полос прокрутки в WebKit соответствующие CSS:

     /* pseudo elements */ ::-webkit-scrollbar { } ::-webkit-scrollbar-button { } ::-webkit-scrollbar-track { } ::-webkit-scrollbar-track-piece { } ::-webkit-scrollbar-thumb { } ::-webkit-scrollbar-corner { } ::-webkit-resizer { } /* pseudo class selectors */ :horizontal :vertical :decrement :increment :start :end :double-button :single-button :no-button :corner-present :window-inactive 

Firefox (Gecko)

Firefox не имеет собственной версии стилей прокрутки в соответствии с этим ответом SO.

Нет эквивалента Gecko для ::-webkit-scrollbar и друзей.

Вам придется придерживаться jQuery.

Многим людям понравится эта функция:
https://bugzilla.mozilla.org/show_bug.cgi?id=77790

В этом отчете запрашивается то же самое, о чем вы просите: https://bugzilla.mozilla.org/show_bug.cgi?id=547260

Стайлинг полос прокрутки

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

  • 20 jQuery Scrollbar plugin с примерами (24 июля 2012 г.)
    • NiceScroll: плагин jQuery Scrolling для настольных, мобильных и сенсорных устройств
    • Пользовательский скроллер jQuery
    • Tiny Scrollbar – легкий плагин jQuery
    • и т.п.
  • 30+ JavaScript / Ajax Techniques для слайдеров, скроллеров и полос прокрутки (07 мая 2008 г.)
  • 21 Полезная панель прокрутки CSS / JavaScript Styling Tutorials (август 2012 г.)
  • 15+ бесплатных и премиальных плагинов прокрутки jQuery (26 августа 2012 г.)

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

Предотrotation нелегального прокрутки

На всякий случай, если вы хотите предотвратить стиль прокрутки, который не был предварительно префикс «-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; } 

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

  • Изменение стиля прокрутки
  • Перекрестный браузер стиля прокрутки CSS
  • Как создать пользовательскую полосу прокрутки в div (стиль Facebook)

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

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

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

Попробуйте

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

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

  

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

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

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

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

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

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

Но iScroll не работает с прикосновением!

demo iScroll : http://lab.cubiq.org/iscroll/examples/simple/
demo 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; } 

Вывод:

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

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

  #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, что если вы применяете следующие classы, они каким-то образом скрывают полосу прокрутки в хроме, но она все еще работает.

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

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

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

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

Поддержка на ХРОМЕ

Вот демо для webkit scrollbar Webkit Scrollbar DEMO

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


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

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

Загрузите плагин из Download Here

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

DEMO

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

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

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

AS @thebluefox предлагает

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

Добавьте сценарий ниже

      

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

 
**Your Paragraph Comes Here**

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

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

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

 .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/adelibr/pen/dKqZNb Но как суть этого. Вы можете сделать что-то подобное.

 

Файл 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(ac.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?bd: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;db?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 

И инициализируйте:

  

И настройте:

 .scroll-place { // ... // } .scroll { // ... // }