Hier ist ein Beispiel für die bekanntesten Browser Chrome, Edge und Firefox.
<style>
/* Gemeinsame Scrollbar-Gestaltung für "alle" Browser die es unterstützen */
.custom-scrollbar {
width: 300px;
height: 300px;
overflow: auto;
}
.custom-scrollbar:hover {
overflow: auto;
}
/* Firefox */
.custom-scrollbar {
scrollbar-width: thin;
scrollbar-color: #888888 #e0e0e0;
}
.custom-scrollbar::-moz-scrollbar {
width: 6px;
}
.custom-scrollbar::-moz-scrollbar-thumb {
background-color: #888888;
}
.custom-scrollbar::-moz-scrollbar-track {
background-color: #e0e0e0;
}
/* Chrome und Edge */
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background-color: #888888;
}
.custom-scrollbar::-webkit-scrollbar-track {
background-color: #e0e0e0;
}
</style>
<div class="custom-scrollbar">
<div class="content">
Lorem ipsum dolor sit amet consectetuer Suspendisse vitae pulvinar at orci. Justo malesuada convallis leo pretium penatibus eget In malesuada tempus gravida. Tempor eget orci turpis turpis wisi enim neque eros nunc hendrerit. Et Aenean tincidunt semper lacinia et dolor sem et Vivamus montes. Rhoncus ipsum ut Curabitur elit Curabitur condimentum augue feugiat laoreet gravida. Tempus Vestibulum Praesent Vestibulum nec ut nibh molestie quis augue.
Sed risus egestas Nam quis scelerisque leo Nam id sem libero. Faucibus Nulla ac odio sed Maecenas orci laoreet dui libero velit. Eget ornare velit ullamcorper id vitae lorem lacus ut non Curabitur. Lacinia justo Sed non habitant quis hendrerit ut Quisque auctor Quisque. Est tincidunt adipiscing suscipit ut consequat fermentum quis orci feugiat ridiculus. Egestas velit justo morbi morbi morbi porttitor est Quisque orci condimentum. Egestas orci adipiscing.
Pellentesque porttitor elit ipsum condimentum magna elit interdum id nec lacus. Lacus et felis semper accumsan congue justo tincidunt orci ac dui. Enim velit malesuada urna consequat hendrerit Nam vel diam lacus feugiat. Nunc auctor feugiat et massa eget justo orci senectus habitasse sem. Eros tellus semper wisi consequat pellentesque lobortis faucibus faucibus elit congue. Sagittis Cras augue nibh tellus non lacinia Morbi consectetuer Curabitur.
Ac sit pretium magnis consectetuer felis ac malesuada justo ullamcorper Phasellus. Amet justo ipsum tristique nulla ligula tincidunt nibh mollis amet cursus. Tortor eget fermentum nascetur Maecenas Aliquam dolor vel elit Curabitur urna. Turpis est leo neque purus id sed morbi sem mauris dapibus. In interdum ut faucibus orci rutrum ac vitae Curabitur fermentum sem. Quis quis Sed Donec tincidunt semper ipsum laoreet adipiscing Morbi felis. Faucibus.
Nec interdum tempus interdum elit est convallis pellentesque Pellentesque tempor Sed. A et massa convallis fames Nunc pretium tempus Nullam nonummy egestas. Tempus id nibh pretium ut vel mauris auctor sit dui et. Lacinia convallis magna Aenean urna ut semper lorem at id nibh. Et vitae amet est nunc congue eget lorem at pretium elit. Leo id eget tellus orci Curabitur id egestas Nulla hac.
Fringilla nibh non at Morbi neque mauris justo orci eget sed. Congue sociis Aenean auctor tortor eros senectus euismod tortor sit nec. Ante augue sed fringilla gravida elit sociis Nulla nibh Nulla a. Nunc montes non felis auctor ac Suspendisse natoque urna pretium nibh. Lacus sit neque malesuada diam elit Aenean Vestibulum ac pellentesque consequat. Sagittis amet Aliquam nunc nulla dui convallis nec In hendrerit nibh.
Eget condimentum sed Nam et urna et quis vel Vivamus natoque. Aliquam magna quis consectetuer cursus dictum quis Sed tristique tincidunt turpis. Turpis augue condimentum at Vivamus magnis et nisl tellus laoreet Sed. Et purus adipiscing iaculis lacinia Vestibulum Aenean lacinia nec odio tellus. Interdum tempus Ut Sed hendrerit fames turpis Vivamus tortor Quisque laoreet. Id convallis orci Phasellus hac id pede lacus turpis Sed Quisque. Metus non.
</div>
</div>