How to create a responsive custom scrollbar using CSS?

HTML Web Development Front End Technology

To create a custom scrollbar, we will use the following pseudo element to create a responsive custom scrollbar using CSS −

:-webkit-scrollbar

Create a custom scrollbar

First, set the width of the scrollbar −

::-webkit-scrollbar {
   width: 12px;
}

Set the color of the scrollbar −

::-webkit-scrollbar-thumb {
   background: skyblue; 
}

Set the hover color of the scrollbar −

::-webkit-scrollbar-thumb:hover {
   background: blue; 
}

Example

Let us now see the complete example to create a responsive custom scrollbar −

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: gray;
}
::-webkit-scrollbar-thumb {
background: skyblue;
}
::-webkit-scrollbar-thumb:hover {
background: blue;
}
</style>
</head>
<body>
<h2>Display Custom Scrollbar</h2>
<p>Check the custom styles scrollbar which changes its color on Hover.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec augue tortor, congue sit amet mi sit amet, interdum euismod urna. Aenean consequat eget odio eget elementum. Nam pellentesque scelerisque interdum. Sed placerat malesuada justo nec tristique. Donec nec nisi suscipit, finibus nibh a, lacinia sem. Cras eleifend risus nulla, eget commodo metus condimentum sit amet. Nulla facilisis ipsum id bibendum congue. Vestibulum aliquam rhoncus elit, pharetra mollis arcu dictum a. Integer vestibulum egestas nibh a consectetur. Duis nec facilisis elit. Quisque ut lorem a nulla ullamcorper laoreet non at sem. Ut maximus enim eu orci blandit feugiat. Donec in tristique risus. Morbi feugiat accumsan ipsum. Nulla facilisi.</p>
<p>Nam sagittis vitae velit a vulputate. Vivamus est lectus, laoreet vel volutpat quis, ultrices non dui. Nullam bibendum felis eget est dapibus congue. Etiam non fringilla tortor. Phasellus velit tortor, tristique quis convallis vitae, scelerisque vel mi. Aenean commodo lorem sed augue feugiat finibus. Suspendisse sit amet euismod ex, in posuere quam. Integer tellus felis, gravida at pharetra iaculis, luctus non turpis. In congue, leo a tristique pellentesque, sem est cursus mi, vel faucibus massa nunc ac velit. In hac habitasse platea dictumst. Pellentesque nec ultrices est. Nunc id finibus dui.</p>
<p>Maecenas fringilla auctor odio, sed suscipit est iaculis et. Pellentesque sed consectetur urna. Proin quis volutpat metus. Nunc fringilla ipsum massa, non sollicitudin ante interdum et. In non viverra ligula. Praesent placerat feugiat auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin vel ullamcorper ipsum, id vestibulum tortor.</p>
<p>Integer cursus blandit massa, eu varius ligula pellentesque non. Vestibulum mattis lacus eu sem gravida, ut posuere ante tempor. Mauris tincidunt fringilla neque id consectetur. Phasellus rutrum dui ut lectus egestas, id sollicitudin neque cursus. Morbi sed orci nulla. Aenean varius scelerisque lacinia. Integer vel vehicula quam. Curabitur enim orci, maximus quis sodales nec, congue quis augue. Quisque quis imperdiet leo. Proin suscipit, felis ac tempus luctus, eros nunc fermentum erat, at accumsan sem est ac nisl. Nunc nec orci volutpat, efficitur erat id, dictum leo. Integer id nunc iaculis, molestie orci ac, tincidunt tellus.</p>
<p>Donec quis arcu at ante elementum sagittis at in tortor. Integer condimentum et nibh a porta. Quisque ligula eros, mattis vel leo tempor, ultricies accumsan nisl. Vestibulum id sodales massa, eget venenatis justo. Duis a orci tristique, tincidunt erat et, sodales est. Etiam pellentesque nunc turpis, eu aliquet ex aliquam id. Duis id ex posuere, sodales purus et, accumsan orci. Pellentesque at erat nisl. Integer luctus a quam viverra maximus. Maecenas eu tempus quam.</p>
<p>Pellentesque fermentum eleifend felis, in rutrum nunc molestie ut. Pellentesque in efficitur ex, eget tincidunt enim. Sed in est sem. Aenean vel neque ut urna feugiat aliquet vitae in ante. Pellentesque sem tellus, vestibulum non nunc eu, convallis maximus nibh. Nullam eget vestibulum est. Curabitur volutpat ornare lorem, eget blandit urna porta in. Etiam facilisis lacinia leo nec sagittis. Aliquam at felis fringilla, porta felis euismod, tincidunt tellus. Maecenas ex erat, scelerisque sed hendrerit id, dignissim in neque. Nulla sit amet ex et tellus gravida tempus quis non nulla. Sed eu est fermentum, scelerisque justo quis, rutrum lorem. In molestie, ex id varius ornare, justo erat vehicula neque, cursus vestibulum ipsum massa in ligula. Cras tortor tellus, mattis eu massa in, suscipit finibus sapien. Sed dapibus porta felis, ut fermentum est lobortis non.</p>
<p>Pellentesque nec mollis ligula. Curabitur id dolor maximus orci ultricies pretium. Aenean eget augue quis mauris pharetra vestibulum sit amet vitae massa. Cras lacinia lacus ut arcu fringilla, eget sollicitudin dui maximus. Nam hendrerit tincidunt turpis, sit amet malesuada velit fringilla eget. Mauris egestas lacus eget lacus vulputate, a pretium velit accumsan. Donec vel libero quis sapien tempus consequat lacinia eu metus. Pellentesque ut vulputate enim. Maecenas sit amet porttitor massa.</p>
<p>Donec vitae lectus sed massa viverra ullamcorper. Ut quis pretium magna. Quisque posuere enim vitae dui pellentesque, eget auctor ipsum blandit. Pellentesque bibendum bibendum aliquet. Donec egestas tincidunt eros, in condimentum arcu viverra et. Integer et nulla magna. Etiam nec felis sit amet arcu dignissim facilisis semper quis mauris. Praesent ligula turpis, suscipit non massa sed, semper imperdiet neque.</p>
</body>
</html>

Output

Above, the scrollbar is visible in skyblue color.

Now, use the scrollbar and reach the end of the page. The color will be now Blue −

AmitDiwan

Updated on: 05-Dec-2022

314 Views

Kickstart Your Career

Get certified by completing the course

Get Started