There is a way by which you can apply custom scrollbars to custom div elements in your HTML documents. Here is a an example which helps. https://codepen.io/adeelibr/pen/dKqZNb But as a gist of it. You can do something like this.
<div class="scrollbar" id="style-1">
<div class="force-overflow"></div>
</div>
CSS file looks like this.
.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;
}
I think you have to use ::-wekbit-scrollbar
for all the scrollbars, and you can use:
<style>
.mydiv {
height:100px;
overflow:auto;
}
/* width */
.mydiv::-webkit-scrollbar {
width: 20px;
}
/* Track */
.mydiv::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
.mydiv::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}
/* Handle on hover */
.mydiv::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
</style>
<body>
<div class="mydiv"> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> </div>
</body>
Webkit scrollbar doesnt support on most of the browers.
Supports on CHROME
Here is a demo for webkit scrollbar Webkit Scrollbar DEMO
If you are looking for more examples Check this More Examples
Another Method is Jquery Scroll Bar Plugin
It supports on all browsers and easy to apply
Download the plugin from Download Here
How to use and for more options CHECK THIS
Like many people, I was looking for something that was:
...But alas - nothing!
Well if a job's worth doing... I was able to get something up and running in about 30 mins. Disclaimer: there's quite a few known (and probably a few as yet unknown) problems with it, but it makes me wonder what on Earth the other 2920 lines of JS are there for in many offerings!
(window => {
let initCoords;
const coords_update = e => {
if (initCoords) {
const elem = initCoords.bar.closest('.scrollr');
const eSuffix = initCoords.axis.toUpperCase();
const sSuffix = initCoords.axis == 'x' ? 'Left' : 'Top';
const dSuffix = initCoords.axis == 'x' ? 'Width' : 'Height';
const max = elem['scroll' + dSuffix] - elem['client' + dSuffix];
const room = elem['client' + dSuffix] - initCoords.bar['client' + dSuffix];
const delta = e['page' + eSuffix] - initCoords.abs;
const abs = initCoords.p0 + delta;
elem['scroll' + sSuffix] = max * abs / room;
}
};
const scrollr_resize = elem => {
const xBar = elem.querySelector('.track.x .bar');
const yBar = elem.querySelector('.track.y .bar');
const xRel = elem.clientWidth / elem.scrollWidth;
const yRel = elem.clientHeight / elem.scrollHeight;
xBar.style.width = (100 * xRel).toFixed(2) + '%';
yBar.style.height = (100 * yRel).toFixed(2) + '%';
};
const scrollr_init = elem => {
const xTrack = document.createElement('span');
const yTrack = document.createElement('span');
const xBar = document.createElement('span');
const yBar = document.createElement('span');
xTrack.className = 'track x';
yTrack.className = 'track y';
xBar.className = 'bar';
yBar.className = 'bar';
xTrack.appendChild(xBar);
yTrack.appendChild(yBar);
elem.appendChild(xTrack);
elem.appendChild(yTrack);
elem.addEventListener('wheel', scrollr_OnWheel);
elem.addEventListener('scroll', scrollr_OnScroll);
xTrack.addEventListener('wheel', xTrack_OnWheel);
xTrack.addEventListener('click', xTrack_OnClick);
xTrack.addEventListener('mouseover', () => xTrack.classList.add('active'));
xTrack.addEventListener('mouseout', () => {
if (!initCoords) xTrack.classList.remove('active');
});
yTrack.addEventListener('click', yTrack_OnClick);
yTrack.addEventListener('mouseover', () => yTrack.classList.add('active'));
yTrack.addEventListener('mouseout', () => {
if (!initCoords) yTrack.classList.remove('active');
});
xBar.addEventListener('click', bar_OnClick);
xBar.addEventListener('mousedown', xBar_OnMouseDown);
yBar.addEventListener('click', bar_OnClick);
yBar.addEventListener('mousedown', yBar_OnMouseDown);
scrollr_resize(elem);
};
window.addEventListener('load', e => {
const scrollrz = Array.from(document.querySelectorAll('.scrollr'));
scrollrz.forEach(scrollr_init);
});
window.addEventListener('resize', e => {
const scrollrz = Array.from(document.querySelectorAll('.scrollr'));
scrollrz.forEach(scrollr_resize);
});
window.addEventListener('mousemove', coords_update);
window.addEventListener('mouseup', e => {
initCoords = null;
Array.from(document.querySelectorAll('.track.active'))
.forEach(elem => elem.classList.remove('active'));
});
function xBar_OnMouseDown(e) {
const p0 = this.offsetLeft;
initCoords = {
axis: 'x',
abs: e.pageX,
bar: this,
p0
};
}
function yBar_OnMouseDown(e) {
const p0 = this.offsetTop;
initCoords = {
axis: 'y',
abs: e.pageY,
bar: this,
p0
};
}
function bar_OnClick(e) {
e.stopPropagation();
}
function xTrack_OnClick(e) {
const elem = this.closest('.scrollr');
const xBar = this.querySelector('.bar');
let unit = elem.clientWidth - 30;
if (e.offsetX <= xBar.offsetLeft) unit *= -1;
elem.scrollLeft += unit;
}
function yTrack_OnClick(e) {
const elem = this.closest('.scrollr');
const yBar = this.querySelector('.bar');
let unit = elem.clientHeight - 30;
if (e.offsetY <= yBar.offsetTop) unit *= -1;
elem.scrollTop += unit;
}
function xTrack_OnWheel(e) {
e.stopPropagation();
const elem = this.closest('.scrollr');
const left0 = elem.scrollLeft;
const delta = e.deltaY !== 0 ? e.deltaY : e.deltaX;
elem.scrollLeft += delta;
const moved = left0 !== elem.scrollLeft;
if (moved) e.preventDefault();
}
function scrollr_OnWheel(e) {
const left0 = this.scrollLeft;
const top0 = this.scrollTop;
this.scrollLeft += e.deltaX;
this.scrollTop += e.deltaY;
const moved = left0 !== this.scrollLeft || top0 !== this.scrollTop;
if (moved) e.preventDefault();
}
function scrollr_OnScroll(e) {
const xTrack = this.querySelector('.track.x');
const yTrack = this.querySelector('.track.y');
const xBar = xTrack.querySelector('.bar');
const yBar = yTrack.querySelector('.bar');
const xMax = this.scrollWidth - this.clientWidth;
const yMax = this.scrollHeight - this.clientHeight;
const xFrac = this.scrollLeft / xMax;
const yFrac = this.scrollTop / yMax;
const xAbs = xFrac * (this.clientWidth - xBar.clientWidth);
const yAbs = yFrac * (this.clientHeight - yBar.clientHeight);
xTrack.style.left = this.scrollLeft + 'px';
xTrack.style.bottom = -this.scrollTop + 'px';
xBar.style.left = xAbs + 'px';
yTrack.style.top = this.scrollTop + 'px';
yTrack.style.right = -this.scrollLeft + 'px';
yBar.style.top = yAbs + 'px';
};
})(window);
_x000D_
.scrollr {
overflow: hidden;
position: relative;
}
.track {
position: absolute;
cursor: pointer;
transition: background-color .3s;
user-select: none;
}
.track.x {
left: 0;
bottom: 0;
width: 100%;
height: 10px;
}
.track.y {
top: 0;
right: 0;
height: 100%;
width: 10px;
}
.bar {
position: absolute;
background-color: yellow;
transition: background-color .3s, opacity .3s, width .3s, height .3s, margin .3s;
display: block;
width: 100%;
height: 100%;
opacity: .7;
}
.track.x .bar {
min-width: 25px;
height: 3px;
margin: 5px 0 2px 0;
}
.track.y .bar {
min-height: 25px;
width: 3px;
margin: 0 2px 0 5px;
}
.track.active {
background-color: #ccc;
}
.track.active .bar {
background-color: #999;
margin: 0;
opacity: 1;
}
.track.x.active .bar {
height: 10px;
}
.track.y.active .bar {
width: 10px;
}
/* Custom client stuff */
.content {
background: red;
}
.content p {
width: 450px;
margin: 0;
}
.scrollr {
max-width: 350px;
max-height: 150px;
}
_x000D_
<div class="scrollr content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc diam magna, molestie sit amet auctor nec, dictum quis mi. Duis pellentesque lacinia pretium. Donec pulvinar, risus sit amet dapibus mattis, eros urna bibendum elit, vel mollis sapien arcu
vitae mi. Fusce vulputate vestibulum metus dapibus eleifend. Quisque ut dictum orci. Nunc bibendum, sapien ac condimentum placerat, arcu orci mollis nunc, vitae sollicitudin arcu nulla quis enim. Praesent non tellus vitae quam tempor maximus vel sed
dolor. Donec id ante ultricies, iaculis sem ut, sollicitudin enim. Quisque id mauris est. Maecenas viverra urna vitae velit semper, vel ultricies augue feugiat. Pellentesque in libero porttitor, lacinia metus in, maximus nisi. Phasellus commodo ligula
vel arcu iaculis hendrerit vitae vel diam. Sed sed lorem maximus, vestibulum leo ut, posuere libero. Donec arcu dui, euismod id aliquet sed, porttitor vitae elit.</p>
<p>Sed aliquam eget justo sit amet dictum. Suspendisse potenti. In placerat orci quis vehicula vehicula. Proin tempor laoreet suscipit. Proin non nulla lacinia est ullamcorper maximus et a sem. Nulla at lacus rhoncus, malesuada ante in, imperdiet sem.
Mauris convallis tristique metus in iaculis. Nulla laoreet ligula non interdum tincidunt. Morbi sed venenatis arcu, sed gravida est. Fusce malesuada ullamcorper lacus, in vulputate risus finibus non.</p>
<p>Suspendisse sapien leo, auctor non ex vitae, volutpat laoreet tortor. Suspendisse sodales libero velit, sed pulvinar lectus feugiat vel. Sed erat eros, porttitor id enim nec, ornare hendrerit nibh. Phasellus at nisi lectus. Cras semper lobortis condimentum.
Etiam nunc felis, vehicula vitae tincidunt pellentesque, pretium sit amet dui. Duis aliquet ultrices lacus eget efficitur. Ut imperdiet velit sed enim laoreet, sed semper libero hendrerit. Donec malesuada auctor sollicitudin.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc diam magna, molestie sit amet auctor nec, dictum quis mi. Duis pellentesque lacinia pretium. Donec pulvinar, risus sit amet dapibus mattis, eros urna bibendum elit, vel mollis sapien arcu
vitae mi. Fusce vulputate vestibulum metus dapibus eleifend. Quisque ut dictum orci. Nunc bibendum, sapien ac condimentum placerat, arcu orci mollis nunc, vitae sollicitudin arcu nulla quis enim. Praesent non tellus vitae quam tempor maximus vel sed
dolor. Donec id ante ultricies, iaculis sem ut, sollicitudin enim. Quisque id mauris est. Maecenas viverra urna vitae velit semper, vel ultricies augue feugiat. Pellentesque in libero porttitor, lacinia metus in, maximus nisi. Phasellus commodo ligula
vel arcu iaculis hendrerit vitae vel diam. Sed sed lorem maximus, vestibulum leo ut, posuere libero. Donec arcu dui, euismod id aliquet sed, porttitor vitae elit.</p>
<p>Sed aliquam eget justo sit amet dictum. Suspendisse potenti. In placerat orci quis vehicula vehicula. Proin tempor laoreet suscipit. Proin non nulla lacinia est ullamcorper maximus et a sem. Nulla at lacus rhoncus, malesuada ante in, imperdiet sem.
Mauris convallis tristique metus in iaculis. Nulla laoreet ligula non interdum tincidunt. Morbi sed venenatis arcu, sed gravida est. Fusce malesuada ullamcorper lacus, in vulputate risus finibus non.</p>
<p>Suspendisse sapien leo, auctor non ex vitae, volutpat laoreet tortor. Suspendisse sodales libero velit, sed pulvinar lectus feugiat vel. Sed erat eros, porttitor id enim nec, ornare hendrerit nibh. Phasellus at nisi lectus. Cras semper lobortis condimentum.
Etiam nunc felis, vehicula vitae tincidunt pellentesque, pretium sit amet dui. Duis aliquet ultrices lacus eget efficitur. Ut imperdiet velit sed enim laoreet, sed semper libero hendrerit. Donec malesuada auctor sollicitudin.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc diam magna, molestie sit amet auctor nec, dictum quis mi. Duis pellentesque lacinia pretium. Donec pulvinar, risus sit amet dapibus mattis, eros urna bibendum elit, vel mollis sapien arcu
vitae mi. Fusce vulputate vestibulum metus dapibus eleifend. Quisque ut dictum orci. Nunc bibendum, sapien ac condimentum placerat, arcu orci mollis nunc, vitae sollicitudin arcu nulla quis enim. Praesent non tellus vitae quam tempor maximus vel sed
dolor. Donec id ante ultricies, iaculis sem ut, sollicitudin enim. Quisque id mauris est. Maecenas viverra urna vitae velit semper, vel ultricies augue feugiat. Pellentesque in libero porttitor, lacinia metus in, maximus nisi. Phasellus commodo ligula
vel arcu iaculis hendrerit vitae vel diam. Sed sed lorem maximus, vestibulum leo ut, posuere libero. Donec arcu dui, euismod id aliquet sed, porttitor vitae elit.</p>
<p>Sed aliquam eget justo sit amet dictum. Suspendisse potenti. In placerat orci quis vehicula vehicula. Proin tempor laoreet suscipit. Proin non nulla lacinia est ullamcorper maximus et a sem. Nulla at lacus rhoncus, malesuada ante in, imperdiet sem.
Mauris convallis tristique metus in iaculis. Nulla laoreet ligula non interdum tincidunt. Morbi sed venenatis arcu, sed gravida est. Fusce malesuada ullamcorper lacus, in vulputate risus finibus non.</p>
<p>Suspendisse sapien leo, auctor non ex vitae, volutpat laoreet tortor. Suspendisse sodales libero velit, sed pulvinar lectus feugiat vel. Sed erat eros, porttitor id enim nec, ornare hendrerit nibh. Phasellus at nisi lectus. Cras semper lobortis condimentum.
Etiam nunc felis, vehicula vitae tincidunt pellentesque, pretium sit amet dui. Duis aliquet ultrices lacus eget efficitur. Ut imperdiet velit sed enim laoreet, sed semper libero hendrerit. Donec malesuada auctor sollicitudin.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc diam magna, molestie sit amet auctor nec, dictum quis mi. Duis pellentesque lacinia pretium. Donec pulvinar, risus sit amet dapibus mattis, eros urna bibendum elit, vel mollis sapien arcu
vitae mi. Fusce vulputate vestibulum metus dapibus eleifend. Quisque ut dictum orci. Nunc bibendum, sapien ac condimentum placerat, arcu orci mollis nunc, vitae sollicitudin arcu nulla quis enim. Praesent non tellus vitae quam tempor maximus vel sed
dolor. Donec id ante ultricies, iaculis sem ut, sollicitudin enim. Quisque id mauris est. Maecenas viverra urna vitae velit semper, vel ultricies augue feugiat. Pellentesque in libero porttitor, lacinia metus in, maximus nisi. Phasellus commodo ligula
vel arcu iaculis hendrerit vitae vel diam. Sed sed lorem maximus, vestibulum leo ut, posuere libero. Donec arcu dui, euismod id aliquet sed, porttitor vitae elit.</p>
<p>Sed aliquam eget justo sit amet dictum. Suspendisse potenti. In placerat orci quis vehicula vehicula. Proin tempor laoreet suscipit. Proin non nulla lacinia est ullamcorper maximus et a sem. Nulla at lacus rhoncus, malesuada ante in, imperdiet sem.
Mauris convallis tristique metus in iaculis. Nulla laoreet ligula non interdum tincidunt. Morbi sed venenatis arcu, sed gravida est. Fusce malesuada ullamcorper lacus, in vulputate risus finibus non.</p>
<p>Suspendisse sapien leo, auctor non ex vitae, volutpat laoreet tortor. Suspendisse sodales libero velit, sed pulvinar lectus feugiat vel. Sed erat eros, porttitor id enim nec, ornare hendrerit nibh. Phasellus at nisi lectus. Cras semper lobortis condimentum.
Etiam nunc felis, vehicula vitae tincidunt pellentesque, pretium sit amet dui. Duis aliquet ultrices lacus eget efficitur. Ut imperdiet velit sed enim laoreet, sed semper libero hendrerit. Donec malesuada auctor sollicitudin.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc diam magna, molestie sit amet auctor nec, dictum quis mi. Duis pellentesque lacinia pretium. Donec pulvinar, risus sit amet dapibus mattis, eros urna bibendum elit, vel mollis sapien arcu
vitae mi. Fusce vulputate vestibulum metus dapibus eleifend. Quisque ut dictum orci. Nunc bibendum, sapien ac condimentum placerat, arcu orci mollis nunc, vitae sollicitudin arcu nulla quis enim. Praesent non tellus vitae quam tempor maximus vel sed
dolor. Donec id ante ultricies, iaculis sem ut, sollicitudin enim. Quisque id mauris est. Maecenas viverra urna vitae velit semper, vel ultricies augue feugiat. Pellentesque in libero porttitor, lacinia metus in, maximus nisi. Phasellus commodo ligula
vel arcu iaculis hendrerit vitae vel diam. Sed sed lorem maximus, vestibulum leo ut, posuere libero. Donec arcu dui, euismod id aliquet sed, porttitor vitae elit.</p>
<p>Sed aliquam eget justo sit amet dictum. Suspendisse potenti. In placerat orci quis vehicula vehicula. Proin tempor laoreet suscipit. Proin non nulla lacinia est ullamcorper maximus et a sem. Nulla at lacus rhoncus, malesuada ante in, imperdiet sem.
Mauris convallis tristique metus in iaculis. Nulla laoreet ligula non interdum tincidunt. Morbi sed venenatis arcu, sed gravida est. Fusce malesuada ullamcorper lacus, in vulputate risus finibus non.</p>
<p>Suspendisse sapien leo, auctor non ex vitae, volutpat laoreet tortor. Suspendisse sodales libero velit, sed pulvinar lectus feugiat vel. Sed erat eros, porttitor id enim nec, ornare hendrerit nibh. Phasellus at nisi lectus. Cras semper lobortis condimentum.
Etiam nunc felis, vehicula vitae tincidunt pellentesque, pretium sit amet dui. Duis aliquet ultrices lacus eget efficitur. Ut imperdiet velit sed enim laoreet, sed semper libero hendrerit. Donec malesuada auctor sollicitudin.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc diam magna, molestie sit amet auctor nec, dictum quis mi. Duis pellentesque lacinia pretium. Donec pulvinar, risus sit amet dapibus mattis, eros urna bibendum elit, vel mollis sapien arcu
vitae mi. Fusce vulputate vestibulum metus dapibus eleifend. Quisque ut dictum orci. Nunc bibendum, sapien ac condimentum placerat, arcu orci mollis nunc, vitae sollicitudin arcu nulla quis enim. Praesent non tellus vitae quam tempor maximus vel sed
dolor. Donec id ante ultricies, iaculis sem ut, sollicitudin enim. Quisque id mauris est. Maecenas viverra urna vitae velit semper, vel ultricies augue feugiat. Pellentesque in libero porttitor, lacinia metus in, maximus nisi. Phasellus commodo ligula
vel arcu iaculis hendrerit vitae vel diam. Sed sed lorem maximus, vestibulum leo ut, posuere libero. Donec arcu dui, euismod id aliquet sed, porttitor vitae elit.</p>
<p>Sed aliquam eget justo sit amet dictum. Suspendisse potenti. In placerat orci quis vehicula vehicula. Proin tempor laoreet suscipit. Proin non nulla lacinia est ullamcorper maximus et a sem. Nulla at lacus rhoncus, malesuada ante in, imperdiet sem.
Mauris convallis tristique metus in iaculis. Nulla laoreet ligula non interdum tincidunt. Morbi sed venenatis arcu, sed gravida est. Fusce malesuada ullamcorper lacus, in vulputate risus finibus non.</p>
<p>Suspendisse sapien leo, auctor non ex vitae, volutpat laoreet tortor. Suspendisse sodales libero velit, sed pulvinar lectus feugiat vel. Sed erat eros, porttitor id enim nec, ornare hendrerit nibh. Phasellus at nisi lectus. Cras semper lobortis condimentum.
Etiam nunc felis, vehicula vitae tincidunt pellentesque, pretium sit amet dui. Duis aliquet ultrices lacus eget efficitur. Ut imperdiet velit sed enim laoreet, sed semper libero hendrerit. Donec malesuada auctor sollicitudin.</p>
</div>
_x000D_
Custom scroll bars aren't possible with CSS, you'll need some JavaScript magic.
Some browsers support non-spec CSS rules, such as ::-webkit-scrollbar
in Webkit but is not ideal since it'll only work in Webkit. IE had something like that too, but I don't think they support it anymore.
This is what Google has used in some of its applications for a long time now. See in the code that, if you apply next classes, they somehow hide the scrollbar in Chrome, but it still works.
The classes are jfk-scrollbar
, jfk-scrollbar-borderless
, and jfk-scrollbar-dark
.testg{ border:1px solid black; max-height:150px; overflow-y: scroll; overflow-x: hidden; width: 250px;}_x000D_
.content{ height: 700px}_x000D_
_x000D_
/* The google css code for scrollbars */_x000D_
::-webkit-scrollbar {_x000D_
height: 16px;_x000D_
overflow: visible;_x000D_
width: 16px_x000D_
}_x000D_
::-webkit-scrollbar-button {_x000D_
height: 0;_x000D_
width: 0_x000D_
}_x000D_
::-webkit-scrollbar-track {_x000D_
background-clip: padding-box;_x000D_
border: solid transparent;_x000D_
border-width: 0 0 0 7px_x000D_
}_x000D_
::-webkit-scrollbar-track:horizontal {_x000D_
border-width: 7px 0 0_x000D_
}_x000D_
::-webkit-scrollbar-track:hover {_x000D_
background-color: rgba(0, 0, 0, .05);_x000D_
box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1)_x000D_
}_x000D_
::-webkit-scrollbar-track:horizontal:hover {_x000D_
box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1)_x000D_
}_x000D_
::-webkit-scrollbar-track:active {_x000D_
background-color: rgba(0, 0, 0, .05);_x000D_
box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)_x000D_
}_x000D_
::-webkit-scrollbar-track:horizontal:active {_x000D_
box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)_x000D_
}_x000D_
.jfk-scrollbar-dark::-webkit-scrollbar-track:hover {_x000D_
background-color: rgba(255, 255, 255, .1);_x000D_
box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2)_x000D_
}_x000D_
.jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:hover {_x000D_
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2)_x000D_
}_x000D_
.jfk-scrollbar-dark::-webkit-scrollbar-track:active {_x000D_
background-color: rgba(255, 255, 255, .1);_x000D_
box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(255, 255, 255, .15)_x000D_
}_x000D_
.jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:active {_x000D_
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(255, 255, 255, .15)_x000D_
}_x000D_
::-webkit-scrollbar-thumb {_x000D_
background-color: rgba(0, 0, 0, .2);_x000D_
background-clip: padding-box;_x000D_
border: solid transparent;_x000D_
border-width: 0 0 0 7px;_x000D_
min-height: 28px;_x000D_
padding: 100px 0 0;_x000D_
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07)_x000D_
}_x000D_
::-webkit-scrollbar-thumb:horizontal {_x000D_
border-width: 7px 0 0;_x000D_
padding: 0 0 0 100px;_x000D_
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07)_x000D_
}_x000D_
::-webkit-scrollbar-thumb:hover {_x000D_
background-color: rgba(0, 0, 0, .4);_x000D_
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25)_x000D_
}_x000D_
::-webkit-scrollbar-thumb:active {_x000D_
background-color: rgba(0, 0, 0, 0.5);_x000D_
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35)_x000D_
}_x000D_
.jfk-scrollbar-dark::-webkit-scrollbar-thumb {_x000D_
background-color: rgba(255, 255, 255, .3);_x000D_
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .1)_x000D_
}_x000D_
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:horizontal {_x000D_
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset -1px 0 0 rgba(255, 255, 255, .1)_x000D_
}_x000D_
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:hover {_x000D_
background-color: rgba(255, 255, 255, .6);_x000D_
box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .37)_x000D_
}_x000D_
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:active {_x000D_
background-color: rgba(255, 255, 255, .75);_x000D_
box-shadow: inset 1px 1px 3px rgba(255, 255, 255, .5)_x000D_
}_x000D_
.jfk-scrollbar-borderless::-webkit-scrollbar-track {_x000D_
border-width: 0 1px 0 6px_x000D_
}_x000D_
.jfk-scrollbar-borderless::-webkit-scrollbar-track:horizontal {_x000D_
border-width: 6px 0 1px_x000D_
}_x000D_
.jfk-scrollbar-borderless::-webkit-scrollbar-track:hover {_x000D_
background-color: rgba(0, 0, 0, .035);_x000D_
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14), inset -1px -1px 0 rgba(0, 0, 0, .07)_x000D_
}_x000D_
.jfk-scrollbar-borderless.jfk-scrollbar-dark::-webkit-scrollbar-track:hover {_x000D_
background-color: rgba(255, 255, 255, .07);_x000D_
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25), inset -1px -1px 0 rgba(255, 255, 255, .15)_x000D_
}_x000D_
.jfk-scrollbar-borderless::-webkit-scrollbar-thumb {_x000D_
border-width: 0 1px 0 6px_x000D_
}_x000D_
.jfk-scrollbar-borderless::-webkit-scrollbar-thumb:horizontal {_x000D_
border-width: 6px 0 1px_x000D_
}_x000D_
::-webkit-scrollbar-corner {_x000D_
background: transparent_x000D_
}_x000D_
body::-webkit-scrollbar-track-piece {_x000D_
background-clip: padding-box;_x000D_
background-color: #f5f5f5;_x000D_
border: solid #fff;_x000D_
border-width: 0 0 0 3px;_x000D_
box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)_x000D_
}_x000D_
body::-webkit-scrollbar-track-piece:horizontal {_x000D_
border-width: 3px 0 0;_x000D_
box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)_x000D_
}_x000D_
body::-webkit-scrollbar-thumb {_x000D_
border-width: 1px 1px 1px 5px_x000D_
}_x000D_
body::-webkit-scrollbar-thumb:horizontal {_x000D_
border-width: 5px 1px 1px_x000D_
}_x000D_
body::-webkit-scrollbar-corner {_x000D_
background-clip: padding-box;_x000D_
background-color: #f5f5f5;_x000D_
border: solid #fff;_x000D_
border-width: 3px 0 0 3px;_x000D_
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14)_x000D_
}_x000D_
.jfk-scrollbar::-webkit-scrollbar {_x000D_
height: 16px;_x000D_
overflow: visible;_x000D_
width: 16px_x000D_
}_x000D_
.jfk-scrollbar::-webkit-scrollbar-button {_x000D_
height: 0;_x000D_
width: 0_x000D_
}_x000D_
.jfk-scrollbar::-webkit-scrollbar-track {_x000D_
background-clip: padding-box;_x000D_
border: solid transparent;_x000D_
border-width: 0 0 0 7px_x000D_
}_x000D_
.jfk-scrollbar::-webkit-scrollbar-track:horizontal {_x000D_
border-width: 7px 0 0_x000D_
}_x000D_
.jfk-scrollbar::-webkit-scrollbar-track:hover {_x000D_
background-color: rgba(0, 0, 0, .05);_x000D_
box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1)_x000D_
}_x000D_
.jfk-scrollbar::-webkit-scrollbar-track:horizontal:hover {_x000D_
box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1)_x000D_
}_x000D_
.jfk-scrollbar::-webkit-scrollbar-track:active {_x000D_
background-color: rgba(0, 0, 0, .05);_x000D_
box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)_x000D_
}_x000D_
.jfk-scrollbar::-webkit-scrollbar-track:horizontal:active {_x000D_
box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)_x000D_
}_x000D_
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:hover {_x000D_
background-color: rgba(255, 255, 255, .1);_x000D_
box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2)_x000D_
}_x000D_
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:horizontal:hover {_x000D_
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2)_x000D_
}_x000D_
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:active {_x000D_
background-color: rgba(255, 255, 255, .1);_x000D_
box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(255, 255, 255, .15)_x000D_
}_x000D_
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:horizontal:active {_x000D_
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(255, 255, 255, .15)_x000D_
}_x000D_
.jfk-scrollbar::-webkit-scrollbar-thumb {_x000D_
background-color: rgba(0, 0, 0, .2);_x000D_
background-clip: padding-box;_x000D_
border: solid transparent;_x000D_
border-width: 0 0 0 7px;_x000D_
min-height: 28px;_x000D_
padding: 100px 0 0;_x000D_
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07)_x000D_
}_x000D_
.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {_x000D_
border-width: 7px 0 0;_x000D_
padding: 0 0 0 100px;_x000D_
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07)_x000D_
}_x000D_
.jfk-scrollbar::-webkit-scrollbar-thumb:hover {_x000D_
background-color: rgba(0, 0, 0, .4);_x000D_
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25)_x000D_
}_x000D_
.jfk-scrollbar::-webkit-scrollbar-thumb:active {_x000D_
background-color: rgba(0, 0, 0, 0.5);_x000D_
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35)_x000D_
}_x000D_
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb {_x000D_
background-color: rgba(255, 255, 255, .3);_x000D_
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .1)_x000D_
}_x000D_
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {_x000D_
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset -1px 0 0 rgba(255, 255, 255, .1)_x000D_
}_x000D_
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:hover {_x000D_
background-color: rgba(255, 255, 255, .6);_x000D_
box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .37)_x000D_
}_x000D_
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:active {_x000D_
background-color: rgba(255, 255, 255, .75);_x000D_
box-shadow: inset 1px 1px 3px rgba(255, 255, 255, .5)_x000D_
}_x000D_
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track {_x000D_
border-width: 0 1px 0 6px_x000D_
}_x000D_
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track:horizontal {_x000D_
border-width: 6px 0 1px_x000D_
}_x000D_
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track:hover {_x000D_
background-color: rgba(0, 0, 0, .035);_x000D_
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14), inset -1px -1px 0 rgba(0, 0, 0, .07)_x000D_
}_x000D_
.jfk-scrollbar-borderless.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:hover {_x000D_
background-color: rgba(255, 255, 255, .07);_x000D_
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25), inset -1px -1px 0 rgba(255, 255, 255, .15)_x000D_
}_x000D_
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-thumb {_x000D_
border-width: 0 1px 0 6px_x000D_
}_x000D_
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {_x000D_
border-width: 6px 0 1px_x000D_
}_x000D_
.jfk-scrollbar::-webkit-scrollbar-corner {_x000D_
background: transparent_x000D_
}_x000D_
body.jfk-scrollbar::-webkit-scrollbar-track-piece {_x000D_
background-clip: padding-box;_x000D_
background-color: #f5f5f5;_x000D_
border: solid #fff;_x000D_
border-width: 0 0 0 3px;_x000D_
box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)_x000D_
}_x000D_
body.jfk-scrollbar::-webkit-scrollbar-track-piece:horizontal {_x000D_
border-width: 3px 0 0;_x000D_
box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)_x000D_
}_x000D_
body.jfk-scrollbar::-webkit-scrollbar-thumb {_x000D_
border-width: 1px 1px 1px 5px_x000D_
}_x000D_
body.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {_x000D_
border-width: 5px 1px 1px_x000D_
}_x000D_
body.jfk-scrollbar::-webkit-scrollbar-corner {_x000D_
background-clip: padding-box;_x000D_
background-color: #f5f5f5;_x000D_
border: solid #fff;_x000D_
border-width: 3px 0 0 3px;_x000D_
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14)_x000D_
}
_x000D_
<div class="testg">_x000D_
<div class="content">_x000D_
Look Ma' my scrollbars doesn't have arrows <br /><br />_x000D_
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/> _x000D_
</div>_x000D_
</div>_x000D_
<br/>_x000D_
<div class="testg jfk-scrollbar jfk-scrollbar-borderless jfk-scrollbar-dark">_x000D_
<div class="content">_x000D_
Look Ma' my scrollbars dissapear in chrome<br /><br />_x000D_
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/> _x000D_
</div>_x000D_
</div>
_x000D_
http://jsfiddle.net/76kcuem0/32/
I just found it useful to remove the arrows from the scrollbars. As of 2015 it's been used in Google Maps when searching for places in the list of results in its material design UI.
Suppose you have the div as
<div class="custom_scroll"> ... </div>
Apply CSS Styles as
//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;
}
Resulting Scroll will appear as
.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;
}
gave me a nice mobile/osx like one.
Here's a webkit example which works for Chrome and 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;
}
Output:
For people using sass here is a mixin with basic functionality (thumb,track color and width). I did not test it extensively so feel free to point any errors.
@mixin element-scrollbar($thumb-color, $background-color: mix($thumb-color, white, 50%), $width: 1rem) {
// For Webkit
&::-webkit-scrollbar-thumb {
background: $thumb-color;
}
&::-webkit-scrollbar-track {
background: $background-color;
}
&::-webkit-scrollbar {
width: $width;
height: $width;
}
// For Internet Explorer
& {
scrollbar-face-color: $thumb-color;
scrollbar-arrow-color: $thumb-color;
scrollbar-track-color: $background-color;
}
// For Firefox future compatibility
// This is W3C draft and does not work yet. Use html-firefox-scrollbar mixin instead.
& {
scrollbar-color: $thumb-color $background-color;
scrollbar-width: $width;
}
}
// For Firefox
@mixin html-firefox-scrollbar($thumb-color, $background-color: mix($thumb-color, white, 50%), $firefox-width: this) {
// This must be used on html/:root element to take effect
& {
scrollbar-color: $thumb-color $background-color;
scrollbar-width: $firefox-width;
}
}
Give this a try
Source : https://nicescroll.areaaperta.com/
Simple Implementation
<script type="text/javascript">
$(document).ready(
function() {
$("html").niceScroll();
}
);
</script>
It is a jQuery plugin scrollbar, so your scrollbars are controllable and look the same across the various OS's.
Please check this link. Example with working demo
#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;
}
Firefox new version(64) support CSS Scrollbars Module Level 1
.scroller {_x000D_
width: 300px;_x000D_
height: 100px;_x000D_
overflow-y: scroll;_x000D_
scrollbar-color: rebeccapurple green;_x000D_
scrollbar-width: thin;_x000D_
}
_x000D_
<div class="scroller">_x000D_
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi_x000D_
welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic._x000D_
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette_x000D_
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato._x000D_
Dandelion cucumber earthnut pea peanut soko zucchini._x000D_
</div>
_x000D_
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars
Or use somthing like this:
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}};
And initialize:
<body onload="new MiniScroll(this);"></body>
And customize:
.scroll-place { // ... // }
.scroll { // ... // }
I tried a lot of plugins, most of them don't support all browsers, I prefer iScroll and nanoScroller works for all these browsers :
But iScroll do not work with touch!
demo iScroll : http://lab.cubiq.org/iscroll/examples/simple/
demo nanoScroller : http://jamesflorentino.github.io/nanoScrollerJS/
I tried a lot of JS and CSS scroll's and I found this was very easy to use and tested on IE and Safari and FF and worked fine
AS @thebluefox suggests
Here is how it works
Add the below script to the
<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>
And this here in the paragraph where you need to scroll
<div id="demo1" style="width:300px; height:250px; padding:8px; resize:both; overflow:scroll">
**Your Paragraph Comes Here**
</div>
For more details visit the plugin page
hope it help's
For people still looking for a good solution just I find out this plugin simplebar
Custom scrollbars vanilla javascript library with native scroll, done simple, lightweight, easy to use and cross-browser.
In my case, I was looking for reactJS solutions, the author also provides wrappers for react, angular, vue and next examples
Use Only CSS work in Firefox +64
.mycoldiv{
scrollbar-color: white rebeccapurple;
scrollbar-width: thin;
display: block;
height:400px;
overflow-x: auto;
}
More info: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars
Webkit browsers (such as Chrome, Safari and Opera) supports the non-standard ::-webkit-scrollbar pseudo element, which allows us to modify the look of the browser's scrollbar.
Note: The ::-webkit-scrollbar is not supported by Firefox or IE and Edge.
* {_x000D_
box-sizing: border-box;_x000D_
font-family: sans-serif;_x000D_
}_x000D_
_x000D_
div {_x000D_
width: 15rem;_x000D_
height: 8rem;_x000D_
padding: .5rem;_x000D_
border: 1px solid #aaa;_x000D_
margin-bottom: 1rem;_x000D_
overflow: auto;_x000D_
}_x000D_
_x000D_
.box::-webkit-scrollbar {_x000D_
width: .8em;_x000D_
}_x000D_
_x000D_
.box::-webkit-scrollbar-track {_x000D_
box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);_x000D_
}_x000D_
_x000D_
.box::-webkit-scrollbar-thumb {_x000D_
background-color: dodgerblue;_x000D_
}
_x000D_
<div class="box">_x000D_
<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>_x000D_
<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>_x000D_
<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>_x000D_
</div>_x000D_
_x000D_
<div>_x000D_
<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>_x000D_
<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>_x000D_
<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>_x000D_
</div>
_x000D_
Reference: How To Create a Custom Scrollbar
Source: Stackoverflow.com