Co ciekawe, nie jest super, proste rozwiązanie tam za pomocą wanilii JavaScript. Zrobiłem czyste, lekkie JS, minimalne rozwiązanie dla przeglądarki krzyżowej. Dostosuj do własnych potrzeb i estetyki
Aktualizacja obejmuje Draggable przewiń:
Oto fiddle i CodePen
HTML
<body>
<div id="main" class="scrollable">
<div class="content-wrapper">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt accusamus maxime voluptatem quasi. Recusandae optio nobis ratione iste consectetur consequatur cupiditate saepe laborum natus neque a provident eum explicabo delectus qui accusantium nostrum reiciendis soluta hic ut at sed laboriosam possimus repudiandae deserunt velit rerum. Aliquam ratione itaque corrupti aperiam quisquam unde aspernatur odio id repellendus corporis eaque expedita in ab minus possimus! Quo tempore consequatur repellat consectetur nemo molestiae perferendis ipsum esse nesciunt blanditiis nobis dicta? Laudantium quaerat inventore deleniti exercitationem explicabo quos pariatur sunt earum labore sed eius blanditiis architecto consequuntur ad consectetur unde sapiente nisi. Sunt eos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt accusamus maxime voluptatem quasi. Recusandae optio nobis ratione iste consectetur consequatur cupiditate saepe laborum natus neque a provident eum explicabo delectus qui accusantium nostrum reiciendis soluta hic ut at sed laboriosam possimus repudiandae deserunt velit rerum. Aliquam ratione itaque corrupti aperiam quisquam unde aspernatur odio id repellendus corporis eaque expedita in ab minus possimus! Quo tempore consequatur repellat consectetur nemo molestiae perferendis ipsum esse nesciunt blanditiis nobis dicta? Laudantium quaerat inventore deleniti exercitationem explicabo quos pariatur sunt earum labore sed eius blanditiis architecto consequuntur ad consectetur unde sapiente nisi. Sunt eos.</p>
</div>
</div>
</div>
<div>Not special and not contained within scrolling</div>
</body>
CSS
.scrollable {
padding: 0% 10%;
position: relative;
border: 1px solid gray;
overflow: hidden;
height: 400px;
}
.scrollable.showScroll::after {
position: absolute;
content: '';
top: 5%;
right: 7px;
height: 90%;
width: 3px;
background: rgba(224, 224, 255, .3);
}
.scrollable .content-wrapper {
width: 100%;
height: 100%;
padding-right: 50%;
overflow-y: scroll;
}
.scroller {
z-index: 5;
cursor: pointer;
position: absolute;
width: 10px;
border-radius: 5px;
background: rgb(111, 111, 190);
top: 0px;
right: 3px;
-webkit-transition: top .08s;
-moz-transition: top .08s;
-ms-transition: top .08s;
-o-transition: top .08s;
transition: top .08s;
}
.content {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
JS
(function() {
var scrollContainer = document.querySelector('.scrollable'),
scrollContentWrapper = document.querySelector('.scrollable .content-wrapper'),
scrollContent = document.querySelector('.scrollable .content'),
contentPosition = 0,
scrollerBeingDragged = false,
scroller,
topPosition,
scrollerHeight;
function calculateScrollerHeight() {
// *Calculation of how tall scroller should be
var visibleRatio = scrollContainer.offsetHeight/scrollContentWrapper.scrollHeight;
return visibleRatio * scrollContainer.offsetHeight;
}
function moveScroller(evt) {
// Move Scroll bar to top offset
var scrollPercentage = evt.target.scrollTop/scrollContentWrapper.scrollHeight;
topPosition = scrollPercentage * (scrollContainer.offsetHeight - 5); // 5px arbitrary offset so scroll bar doesn't move too far beyond content wrapper bounding box
scroller.style.top = topPosition + 'px';
}
function startDrag(evt) {
normalizedPosition = evt.pageY;
contentPosition = scrollContentWrapper.scrollTop;
scrollerBeingDragged = true;
}
function stopDrag(evt) {
scrollerBeingDragged = false;
}
function scrollBarScroll(evt) {
if (scrollerBeingDragged === true) {
var mouseDifferential = evt.pageY - normalizedPosition;
var scrollEquivalent = mouseDifferential * (scrollContentWrapper.scrollHeight/scrollContainer.offsetHeight);
scrollContentWrapper.scrollTop = contentPosition + scrollEquivalent;
}
}
function createScroller() {
// *Creates scroller element and appends to '.scrollable' div
// create scroller element
scroller = document.createElement("div");
scroller.className = 'scroller';
// determine how big scroller should be based on content
scrollerHeight = calculateScrollerHeight();
if (scrollerHeight/scrollContainer.offsetHeight < 1){
// *If there is a need to have scroll bar based on content size
scroller.style.height = scrollerHeight + 'px';
// append scroller to scrollContainer div
scrollContainer.appendChild(scroller);
// show scroll path divot
scrollContainer.className += ' showScroll';
// attach related draggable listeners
scroller.addEventListener('mousedown', startDrag);
window.addEventListener('mouseup', stopDrag);
window.addEventListener('mousemove', scrollBarScroll)
}
}
createScroller();
// *** Listeners ***
scrollContentWrapper.addEventListener('scroll', moveScroller);
}());
Koncepcja jest prosta. Mamy główny div z klasą "przewijaną". JavaScript rozpoznaje ten element i dołącza element div rolki, dzięki któremu możesz stworzyć styl za pomocą CSS. Poprzez zagnieżdżenie elementu potomnego content-wrapper możemy efektywnie wypchnąć rodzimy scroller poza element div, zachowując jednocześnie kontrolę nad dopełnieniem.
Oto schemat: 
Powodem musimy zachować natywną możliwość przewijania dlatego przewijania zdarzeń JavaScript pożary tylko na elementach, które przelewowy zestaw do przewijania.Zobacz MDN reference on scroll. Zaletą jest to, że jeśli JS jest wyłączony, nadal będziemy wdzięcznie zastępować przewijanie bez paska przewijania.
UWAGA
Należy pamiętać, że trzeba będzie dostosować swoją wersję, aby przeliczyć rozmiar scroller w niektórych przypadkach:
1.) W przypadku, gdy ekran jest zmieniany lub
2) Jeśli więcej treść została dołączona.
Po drugie, należy wprowadzić modyfikacje, jeśli istnieje wiele elementów przewijanych. W takim przypadku należy zapętlić te elementy, aby dołączyły element div rolki i odsłuchały zdarzenia przewijania.
Niektóre przeglądarki umożliwiają stylowanie natywnego paska przewijania. Nie polecam używania niestandardowego paska przewijania, ponieważ jeśli coś pęknie w kodzie JS, użytkownicy nie będą mogli przewijać. – Oriol
Czy ['noraesae/perfect-scrollbar'] (https://github.com/noraesae/perfect-scrollbar) będzie dla ciebie działał? [** DEMO **] (http://noraesae.github.io/perfect-scrollbar/). Określa "* perfect-scrollbar jest minimalistyczną, ale idealną (dla mnie, a może dla większości programistów) wtyczką scrollbar współpracującą z jQuery lub ** vanilla JavaScript również **.* " – h2ooooooo
Możesz utworzyć własny pasek przewijania za pomocą js, używając zdarzeń i ręcznie ustawiając pozycję elementów i przewijając zawartość, co nie byłoby takie trudne, ale domyślam się, że musi być jakieś lepsze rozwiązanie. – Mykybo