How To Make Custom Scrollbar
Here i show you how to make custom scrollbar using html css and js only:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
::-webkit-scrollbar {
width: 0px;
height: 0px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-image: linear-gradient(45deg, rgba(23, 45, 67), rgb(68, 96, 124));
}
.custom-scrollbar-track {
visibility: hidden;
border-radius: 40px;
overflow: hidden;
background-image: linear-gradient(to top, #52595e, #121f2c);
position: fixed;
width: 10px;
margin-top: 7vh;
height: 80vh;
top: 0;
right: 0;
animation: scbar1 5s ease-in-out infinite forwards reverse;
}
.custom-scrollbar-track:hover {
visibility: visible;
opacity: 0.7;
border-radius: 100px;
overflow: hidden;
background-color: blue;
position: fixed;
width: 20px;
margin-top: 7vh;
height: 80vh;
top: 0;
right: 0;
animation: scbar1 5s ease-in-out infinite forwards;
}
.custom-scrollbar {
box-shadow: 0px 3px 1px rgba(27, 57, 66, 0.781);
visibility: visible;
border-radius: 40px;
top: 0;
overflow: hidden;
position: relative;
width: 10px;
height: 10vh;
background-image: linear-gradient(to top, #833ab4, #fd1d1d, #fcb045);
animation: scbar2 5s ease-in-out infinite forwards alternate;
}
.custom-scrollbar::before {
content: '';
filter: blur(10px);
box-shadow: 0px 3px 1px rgba(27, 57, 66, 0.781);
visibility: visible;
border-radius: 40px;
top: 0;
overflow: hidden;
position: relative;
width: 10px;
height: 10vh;
background-image: linear-gradient(to top, #833ab4, #fd1d1d, #fcb045);
}
.custom-scrollbar::after {
content: '';
filter: blur(30px);
box-shadow: 0px 3px 1px rgba(27, 57, 66, 0.781);
visibility: visible;
border-radius: 40px;
top: 0;
overflow: hidden;
position: relative;
width: 10px;
height: 10vh;
background-image: linear-gradient(to top, #833ab4, #fd1d1d, #fcb045);
}
@keyframes scbar1 {
0%,
100% {
filter: opacity(0.9) brightness(100%) contrast(100%) hue-rotate(0deg);
}
50% {
filter: opacity(0.4) brightness(200%) contrast(150%) hue-rotate(360deg);
}
}
@keyframes scbar2 {
0%,
100% {
filter: contrast(120%) drop-shadow(0px 0px 0px hsla(189, 13%, 20%, 0.473)) opacity(1) hue-rotate(0deg);
}
50% {
filter: contrast(150%) drop-shadow(0px 3px 5px hsla(189, 13%, 20%, 0.473)) opacity(0.7) hue-rotate(360deg);
}
}
@keyframes scbar3 {
0%,
100% {
filter: opacity(1) brightness(100%) contrast(100%) hue-rotate(0deg);
}
50% {
filter: opacity(0.7) brightness(200%) contrast(200%) hue-rotate(360deg);
}
}
.custom-scrollbar:active {
border-radius: 100px;
width: 20px;
animation: scbar3 5s ease-in-out infinite forwards;
cursor: grab;
user-select: none;
}
.custom-scrollbar:hover {
border-radius: 100px;
width: 20px;
cursor: grab;
user-select: none;
animation: scbar3 5s ease-in-out infinite forwards;
}
p,
h1 {
color: #42c4d841;
font-family: Balsamiq Sans;
}
</style>
</head>
<body>
<script>
document.addEventListener("DOMContentLoaded", function () {
let isDragging = false;
let startY = 0;
let scrollTop = 0;
let Cst = document.createElement('div');
Cst.setAttribute('class', 'custom-scrollbar-track');
document.body.appendChild(Cst);
let Csb = document.createElement('div');
Csb.setAttribute('class', 'custom-scrollbar');
Cst.appendChild(Csb);
const scrollbar = document.querySelector('.custom-scrollbar-track');
const scrollThumb = document.querySelector('.custom-scrollbar');
function setScrollThumbHeight() {
const contentHeight = document.documentElement.scrollHeight;
const viewportHeight = window.innerHeight;
const scrollbarHeight = scrollbar.offsetHeight;
const scrollThumbHeight = Math.max((viewportHeight / contentHeight) * scrollbarHeight, 30);
scrollThumb.style.height = `${scrollThumbHeight}px`;
}
scrollbar.addEventListener('mousedown', function (event) {
const clickPosition = event.clientY - scrollbar.getBoundingClientRect().top;
const thumbHeight = scrollThumb.getBoundingClientRect().height;
const trackHeight = scrollbar.getBoundingClientRect().height;
const thumbPosition = clickPosition - (thumbHeight / 2);
const maxThumbTop = trackHeight - thumbHeight;
const newThumbTop = Math.min(Math.max(thumbPosition, 0), maxThumbTop);
scrollThumb.style.top = `${newThumbTop}px`;
const scrollPercent = newThumbTop / maxThumbTop;
const contentHeight = document.documentElement.scrollHeight;
const totalScrollHeight = contentHeight - window.innerHeight;
const scrollPosition = totalScrollHeight * scrollPercent;
window.scrollTo({
top: scrollPosition,
left: 0,
});
});
scrollThumb.addEventListener('mousedown', function (e) {
document.body.style.cursor = 'grab';
isDragging = true;
startY = e.clientY - scrollThumb.offsetTop;
scrollTop = scrollbar.scrollTop;
e.preventDefault();
});
document.addEventListener('mousemove', function (e) {
if (isDragging) {
let newTop = e.clientY - startY;
newTop = Math.max(newTop, 0);
newTop = Math.min(newTop, scrollbar.offsetHeight - scrollThumb.offsetHeight);
scrollThumb.style.top = `${newTop}px`;
const scrollPercent = newTop / (scrollbar.offsetHeight - scrollThumb.offsetHeight);
const contentHeight = document.documentElement.scrollHeight;
const totalScrollHeight = contentHeight - window.innerHeight;
const ScrollPosition = totalScrollHeight * scrollPercent;
window.scrollTo({
top: ScrollPosition,
left: 0,
});
e.preventDefault();
}
});
window.addEventListener('scroll', (e) => {
const pxToVh = (scrollThumb.offsetHeight / window.innerHeight) * 100;
const totalHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const initialThumbTop = (parseInt(scrollThumb.style.top) + scrollThumb.offsetHeight) / window.innerHeight * 100 - pxToVh;
scrollThumb.style.top = `${initialThumbTop}vh`;
const hgA = (scrollbar.offsetHeight / window.innerHeight) * 100 - pxToVh;
scrollThumb.style.top = `${(window.scrollY / totalHeight) * hgA}vh`;
e.preventDefault();
});
if (document.documentElement.scrollHeight > window.innerHeight) {
document.querySelector('.custom-scrollbar-track,.custom-scrollbar-track').style.display = 'block';
} else {
document.querySelector('.custom-scrollbar-track,.custom-scrollbar-track').style.display = 'none';
}
function checkScrollbarVisibility() {
const contentHeight = document.documentElement.scrollHeight;
const windowHeight = window.innerHeight;
const isScrollable = contentHeight > windowHeight;
if (isScrollable) {
scrollThumb.style.display = 'block';
scrollbar.style.display = 'block';
} else {
scrollThumb.style.display = 'none';
scrollbar.style.display = 'none';
}
}
checkScrollbarVisibility();
window.addEventListener('resize', checkScrollbarVisibility);
setScrollThumbHeight();
window.addEventListener('resize', function (e) {
setScrollThumbHeight();
e.preventDefault();
});
document.addEventListener('mouseup', function (e) {
document.body.style.cursor = 'auto';
isDragging = false;
e.preventDefault();
});
</script>
<pre>
<h1 style="text-align: center;">How to make custom scrollbar</h1>
</pre>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore minus tempore ratione explicabo asperiores?m
repudiandae repellat deserunt, porro soluta. Sapiente
nostrum vel, animi ullam at facilis quae, debitis assumenda, consectetur dicta quasi error ipsa. Incidunt totam
quidem adipisci tenetur soluta corrupti ea ducimus modi itaque accusamus tempore eos esse, cum odit iure eum
fugiat nulla enim hic, dignissimos qui. Repellendus, optio minima aut officia, nisi mollitia totam corporis
laudantium quos eveniet perferendis similique maxime nulla non ad pariatur. Vel ad quos perspiciatis eveniet
quisquam quo sunt inventore commodi porro? Tempora omnis laudantium, totam architecto officiis nesciunt culpa et
neque, qui nemo odit molestias magni quas voluptate unde? Perferendis illo dolore illum est, ex magni sint sunt
quos officia eveniet rerum recusandae deserunt veritatis corporis at reiciendis fugiat sed minus unde earum!
Commodi mollitia itaque ab, vero cum ullam impedit sit, voluptates eveniet asperiores voluptatibus a! Obcaecati,
sunt, at cum exercitationem, ullam eveniet provident necessitatibus pariatur adipisci perspiciatis numquam!
Fugit dolorem maxime aliquam ullam similique deleniti laboriosam ratione quis qui placeat rerum, deserunt quae
facilis modi odio illo nesciunt corporis sed? Odit, dicta dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, id ducimus. Voluptatem suscipit, distinctio
incidunt quisquam, quaerat, accusamus adipisci nihil odit eligendi quos illum ea veritatis. Corrupti deleniti
quaerat, cupiditate ipsa iure quae. Voluptates, minus ullam. Nobis accusamus, quas quibusdam deserunt, quae
possimus dignissimos quo quis veniam molestias porro similique, minima necessitatibus debitis tempora. Provident
unde dignissimos tenetur cumque excepturi natus dolorum incidunt, libero quis quaerat vitae ut aliquid
laudantium dolorem consequuntur itaque, dicta ratione? Saepe ex eius maiores quis tenetur amet distinctio
eligendi voluptate, doloribus mollitia ab adipisci fuga nam, consectetur consequatur reiciendis omnis
praesentium explicabo facere perspiciatis illum! Vitae qui pariatur quos aliquid aperiam minus a. Vel tempora
molestiae, nobis saepe totam cumque! Ullam sapiente laboriosam distinctio laudantium optio facere, atque ad
itaque officia earum sit. Odit est commodi minus quos. Delectus necessitatibus voluptatum cum? Iste, eaque
laborum quo ratione tenetur neque veritatis aut quam. Possimus distinctio molestiae praesentium, quia itaque
placeat inventore perspiciatis eius totam reiciendis aliquid et labore explicabo a eum quod ducimus voluptatem
sequi iure ea fugiat. At, mollitia eius, quaerat, numquam maiores tenetur unde et nemo excepturi sequi molestias
voluptatem consequuntur officiis velit laudantium cum nesciunt quo a voluptates quasi libero. Tempore aliquid
iure culpa hic, nobis quidem corporis, deserunt perferendis odio praesentium debitis atque, recusandae ullam
molestias est. Nam veritatis molestias quam corporis fugit placeat odio rerum eum, fuga suscipit incidunt
cupiditate consequuntur et. Vero excepturi cumque adipisci voluptatibus soluta magni, placeat quod sed
perspiciatis magnam voluptates, deserunt temporibus ducimus in deleniti quas, fuga saepe tempora. Aut suscipit
autem laborum quos accusantium assumenda iure nisi sint est quidem magni soluta libero dolorum saepe quaerat
beatae aperiam, fuga perspiciatis eum velit iusto, quis facere. Sequi temporibus suscipit, nostrum unde
necessitatibus laborum earum distinctio odio dolorem, dignissimos cupiditate cumque deleniti sapiente recusandae
quos laudantium aspernatur quasi ipsum saepe dicta reiciendis. Sapiente maxime impedit saepe perspiciatis quas
facere autem cum cumque similique magnam. Aut veritatis ipsam, enim necessitatibus iusto modi nam rerum ad
voluptatibus sequi. Pariatur, architecto doloribus cupiditate exercitationem voluptates voluptate nemo, iusto
nostrum consequatur necessitatibus soluta ad repellat deleniti doloremque. Cum sint, sunt eligendi aliquid odit
officiis animi neque nostrum modi nemo sit impedit earum accusantium eaque aliquam laudantium dolore ducimus
quas illum recusandae exercitationem eveniet. Rerum amet voluptatem, optio sunt praesentium esse non deserunt.
Inventore nostrum consectetur autem excepturi nesciunt rem optio beatae ducimus in. Ducimus neque dicta impedit
quas suscipit delectus nisi tempore at corporis iste, dignissimos nemo voluptate et corrupti explicabo
reprehenderit eligendi vero debitis minus quam id. Dolore vitae alias tempore earum pariatur quas debitis
consequuntur optio facere. Modi a ratione nihil nulla rem laborum, consequatur doloremque quam ipsum dignissimos
perferendis facilis nesciunt incidunt fuga libero itaque, repellendus doloribus excepturi, eaque voluptatum
alias laudantium enim. Excepturi modi iusto libero blanditiis eligendi ducimus, dolorem consectetur animi
tempore, placeat eius nesciunt architecto, alias facere pariatur corporis laborum quo aut illum nulla officia
ullam iste ex. Natus consequuntur nobis nisi, blanditiis sequi dolorum repellendus aperiam similique debitis
quas quidem quisquam ratione eaque. Ipsa, ratione fugiat repellendus aspernatur iure repudiandae numquam
corrupti tenetur esse consequuntur odio dolorem quam atque iusto provident cum, impedit error? Laboriosam
ratione autem, quibusdam cupiditate culpa molestias accusantium dicta! Aspernatur eaque hic dolore quisquam aut,
inventore cupiditate qui provident itaque quos deleniti exercitationem sint minus at numquam vero doloribus?
Esse reiciendis, quasi est quibusdam possimus neque quis voluptatum veritatis aliquam similique tenetur nostrum
modi, ducimus recusandae culpa minima itaque illum sunt expedita eligendi odit corporis. Tempore facere ullam,
possimus omnis corrupti suscipit quae saepe perferendis quas iusto blanditiis et aperiam natus in maiores! Nulla
consequatur, perspiciatis dignissimos error numquam laudantium. Blanditiis, ullam dolore accusantium officiis
aspernatur, voluptatibus autem debitis rem deleniti nemo unde quia nobis porro, voluptate perferendis velit
dolorem dolorum. Deserunt unde accusamus ab ducimus dolor quidem, ea, nam molestias rem atque provident
excepturi odio quia. Rem vero repellat, maxime voluptates iusto exercitationem quibusdam dolores excepturi nulla
minima quisquam non esse vel eos in mollitia pariatur, culpa velit sit eveniet molestias accusantium rerum.
Soluta laborum, dolore deserunt quas aut laboriosam molestiae, dolorum rem, debitis beatae cum error illum fugit
excepturi officia maxime. Aperiam optio deleniti architecto quidem ullam. Eum animi odit voluptate
necessitatibus, esse adipisci neque qui sint nobis maiores mollitia vero aut assumenda consequuntur aliquid
nesciunt ipsum consectetur quae pariatur illo. Ipsam vitae praesentium atque, ut quas facere iusto, molestiae
voluptatibus, dignissimos minima itaque non? Dolor, non debitis adipisci consequuntur reprehenderit voluptas
exercitationem ipsum error, blanditiis ullam similique impedit in vel. Quam mollitia, nesciunt iste nostrum ab
deleniti, autem earum id repellat sit hic fugiat, alias at modi quibusdam tempore natus. Magni eaque soluta
nihil reprehenderit eligendi. Atque ipsam aperiam natus a eveniet ea alias, saepe voluptatem necessitatibus et
molestiae est voluptatum deserunt ducimus? Velit voluptas quidem corrupti obcaecati officiis, voluptates nisi
quaerat odit sit ratione explicabo a? Lorem ipsum dolor, sit amet consectetur adipisicing elit. In, ipsa odio
iure necessitatibus corrupti recusandae repellendus aliquam animi voluptatem sit quaerat dicta. Libero
voluptatem officia officiis eligendi ad velit quos voluptates aliquam ratione! Nesciunt molestias nostrum
facilis reprehenderit quis necessitatibus rem, totam doloribus culpa maiores. Quibusdam odio aliquid ratione et
itaque repellendus praesentium maxime delectus? Assumenda dolorem quis officiis quaerat excepturi, labore,
inventore rem impedit laboriosam aliquam animi quae sapiente distinctio? Provident in impedit voluptas dolor
eius, tempora id. Maiores exercitationem nisi accusamus necessitatibus labore cum magni suscipit placeat autem
voluptates, dolorum harum adipisci sint reprehenderit officia repellendus ducimus veniam soluta dolore
repudiandae eveniet iure molestias iusto quibusdam. Accusamus nemo omnis maxime a! Ipsa, impedit veniam. Non
corporis voluptates ratione, fugit temporibus quibusdam vero eveniet officiis laboriosam optio est totam
veritatis tenetur recusandae a! Deleniti doloremque fugit eum earum nulla delectus unde accusantium ullam
exercitationem autem magnam tempore, tenetur possimus accusamus sequi voluptate, blanditiis saepe laudantium.
Beatae rem consequuntur aliquam quia deserunt officiis incidunt, quidem autem iure doloribus, impedit
reprehenderit adipisci quisquam obcaecati quod iusto. Iure, nisi. Odio quas dolor at assumenda doloremque
dolorem minus cum ab dolore dicta enim quam hic possimus ipsa molestias reiciendis, laborum, atque dolores magni
a commodi. Qui culpa id nulla et expedita commodi laudantium magni exercitationem cumque soluta? Ratione, fugiat
in accusamus natus exercitationem vitae laudantium vel recusandae aspernatur consequatur earum at rem et
cupiditate cum. Soluta odit nulla laboriosam sapiente rerum impedit veniam dolor ipsa. Perspiciatis esse
obcaecati dolores. Modi vel eligendi veniam laborum, inventore omnis ratione ullam assumenda facilis laboriosam
autem praesentium qui doloremque, eveniet sit excepturi nulla architecto debitis molestiae ex deserunt mollitia
sint quam ad. Quibusdam saepe nisi quas consectetur, praesentium autem dolores repellendus rem eligendi numquam,
voluptate provident, nobis impedit ratione? Incidunt id laudantium, ut obcaecati et maxime error excepturi rem
similique deserunt iure esse corporis ea porro odit? Beatae ab quas magnam cumque reprehenderit molestiae
laboriosam, aliquid odit natus, libero incidunt adipisci esse reiciendis praesentium nostrum explicabo quae
inventore unde dolore deserunt assumenda accusantium! Quidem dignissimos iste impedit ex quo suscipit unde atque
omnis, in est, aperiam placeat explicabo laborum. Quis, vitae odit? Perferendis minus error repellendus
aspernatur architecto nostrum omnis sit delectus dolorum amet nulla possimus qui sunt consequuntur deleniti
laborum eius quo, dignissimos obcaecati aperiam distinctio, animi consectetur veritatis? Voluptatem voluptate
itaque, dolores eveniet deserunt consequatur voluptatum. Architecto, veniam quae alias necessitatibus
perferendis voluptas! Molestiae magni at rem, dicta praesentium voluptate, enim aliquam eum pariatur quis earum
blanditiis, adipisci consectetur beatae reprehenderit inventore voluptas molestias voluptatibus deleniti?
Voluptatum illum suscipit iusto ut labore minus assumenda doloremque voluptate eius voluptatem facilis expedita
architecto omnis, alias iure similique dolorem magnam itaque quod quaerat? Corporis nulla labore, exercitationem
quas quam, aliquid officiis neque ab minima excepturi est ullam cumque quia mollitia! Quis ab, maiores tenetur
quos consequatur iste hic est necessitatibus cumque unde obcaecati modi provident ipsum. Eum impedit quo
voluptates et quis neque eaque unde odit adipisci error earum, eius magni alias reiciendis esse in laborum quae,
voluptatum repellat vel quod consequuntur! Deleniti quia minima beatae reprehenderit commodi eaque impedit
perferendis recusandae nisi, facilis quibusdam quas, aut facere temporibus fugiat a neque tempore! Nulla cumque
porro consequuntur provident ut, quod alias delectus enim suscipit ab, soluta consequatur, totam ea quae illo
sit. At quos culpa eligendi voluptates fuga? Aliquid dolor voluptas, libero officiis quis fugiat repellat
voluptate hic placeat quia perferendis! Consectetur, itaque. Sed cum totam molestias quasi velit aliquam optio
animi sit est qui ipsa sunt voluptatum, laboriosam modi eum mollitia deleniti quaerat perspiciatis, tempora
consequatur assumenda vitae? Laborum quia, autem quidem quasi iusto architecto officiis nihil magni tempore
minus odio eveniet repellendus eaque vero unde, error earum nostrum! Tempora consequatur magnam veritatis aut
debitis accusamus error suscipit sint cum, exercitationem facere eveniet nulla pariatur dolore inventore quae
enim nobis aperiam voluptatem fuga? Optio cum iusto in perspiciatis saepe assumenda voluptates architecto,
cupiditate totam dolor cumque, laborum laudantium! Mollitia repellendus quo iure voluptatum ducimus numquam
provident illo? Quas reiciendis beatae cumque maiores ipsum facilis. Assumenda deleniti, dolores placeat
pariatur non ullam ut animi, asperiores cupiditate aut nemo. Nisi autem tempore eaque a expedita provident
numquam! Adipisci, quaerat molestias! Ratione quisquam odit fuga facere numquam in repudiandae aliquam.
Recusandae ea possimus delectus consequatur ipsum? Eligendi eum nisi consectetur, voluptatem dolore sunt porro
rerum commodi optio illum eaque quo quaerat quae exercitationem excepturi, ipsa itaque dolorem odio, repellat
atque adipisci dolores harum voluptas laboriosam? Mollitia ipsa eaque voluptatem distinctio nesciunt ratione?
Accusamus aut officia quae corrupti voluptatem ipsa laborum! At incidunt dicta quas obcaecati! Eius, sequi
aliquam voluptatibus voluptates laboriosam magnam, iure odit aperiam mollitia aut odio eaque sint deleniti.
Ipsum incidunt harum voluptatibus cupiditate, non laboriosam ut. Deleniti quia dolore recusandae iusto quidem
repudiandae accusamus! Voluptates, fugiat dolores sapiente sit enim vero at culpa quia quis aperiam quaerat
asperiores repudiandae veniam quo? Iste quaerat dolores dolore ducimus. Facere quae architecto dolor blanditiis
iste modi error nostrum at voluptatem! Facilis dolores non quisquam, dolorem hic tempore excepturi quibusdam
molestiae commodi temporibus. Iure alias eveniet esse repudiandae, nam, beatae asperiores sint voluptatum odio
sit delectus illum vel temporibus ad explicabo quam ducimus hic iste! Culpa vitae sunt facere, expedita beatae
nam nemo nisi eum voluptatibus consequatur animi veritatis neque, id obcaecati cupiditate. Exercitationem
nesciunt id dicta harum accusantium, enim cumque dignissimos delectus ad voluptatem consequuntur dolorem odio
tempore, quos laboriosam odit a non necessitatibus, dolor autem perferendis? Maiores hic quos culpa. Ipsa non
labore tempore eum. Aliquam, ratione veniam, aliquid deleniti, alias quaerat quas numquam soluta velit quae
nesciunt. Laudantium repellendus, nulla iusto nam inventore laborum qui maxime minus ut? Nesciunt, consequuntur
modi! Non maxime illo quasi sequi natus dicta architecto. Ullam, error cumque est vel sapiente perspiciatis ex
commodi eius voluptatibus neque repellendus dolores, ab sint dolorem nemo necessitatibus expedita magnam sit.
Laudantium id cum similique dignissimos explicabo corporis nemo quidem tenetur! Consequuntur perspiciatis
distinctio ipsa, aspernatur, sed iste libero optio culpa repellat beatae molestiae in laboriosam. Aliquid
adipisci nam repudiandae repellendus, itaque dignissimos quam voluptatibus! Adipisci, libero cumque.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem facilis doloremque culpa blanditiis
voluptas odit reiciendis, fugiat dicta a illum? Accusamus error facilis reprehenderit et, fugit voluptatum odit
cumque dolore eum velit vitae dolorem in voluptates, veritatis maiores hic voluptatibus praesentium pariatur
saepe nulla sequi commodi, assumenda blanditiis iste! Debitis voluptatum ipsam aliquid nobis impedit nemo amet
id dolores necessitatibus corrupti possimus blanditiis quos consequatur earum ipsa qui nihil perspiciatis,
inventore minus, neque voluptates! Ex, officiis perspiciatis natus commodi esse adipisci perferendis expedita
nostrum dolorum. Similique incidunt ad reiciendis doloribus, illo architecto cum perferendis. Totam omnis
adipisci assumenda alias ipsum, odio similique placeat? Debitis dolor iste soluta voluptatum odit voluptate.
Dolores ab et excepturi vero rem amet nemo quaerat quod sapiente tenetur. Veritatis mollitia atque ut, excepturi
corporis officia, amet ipsa vel, asperiores minima alias! Incidunt ipsa dicta quibusdam eum maiores doloremque
libero placeat necessitatibus iure vel. Vitae quae nisi, itaque molestias omnis magnam animi aliquam
exercitationem. Possimus, aperiam repudiandae ipsam ea quidem obcaecati cumque voluptas quam architecto aut
nobis qui consequuntur maiores? Autem temporibus odit tempora sunt reprehenderit unde, sit officia laborum hic a
dicta at. Inventore harum dolore vel ratione, omnis quos dolorum dolorem, voluptatibus blanditiis quasi corrupti
quo sit quis obcaecati porro recusandae nemo aut nostrum? Exercitationem et, blanditiis inventore beatae
possimus perspiciatis aut itaque, neque tempore quasi quis nihil natus sequi repudiandae, voluptates aperiam ea
facere? Nulla, excepturi animi. Dicta delectus deleniti magni nulla. Quia eligendi reprehenderit deserunt fuga
asperiores! Voluptates in quaerat rerum impedit, quo sequi commodi illo saepe distinctio minima voluptatum
accusantium necessitatibus quia asperiores, ipsum nostrum quibusdam dolore, dolores velit suscipit maxime
similique possimus! Architecto nam atque quam maiores. Non voluptate ipsum, dolore ab, nemo nobis sed, ipsam
laborum tenetur similique mollitia corrupti aspernatur? Magni labore incidunt minima delectus autem. Recusandae
itaque pariatur incidunt praesentium expedita ullam dolorum tenetur eaque quae. Pariatur illum quas eius nisi
corporis? Sint vel adipisci animi assumenda, commodi magnam molestiae esse fugit non, magni obcaecati aliquid
nobis, doloremque saepe recusandae ex. Veniam modi placeat hic enim porro illum debitis quasi sapiente officiis
labore animi nam error quae reiciendis ipsum quam, est sed possimus distinctio ipsa sequi adipisci in! Modi
blanditiis atque unde, architecto, placeat impedit nesciunt, maiores reprehenderit enim aliquam quaerat
aspernatur perspiciatis vero assumenda labore excepturi. Nihil vel laborum, sint quas tempora explicabo dolorum
maiores ad itaque, similique labore fugit, ipsum aperiam voluptatem odit error sit quod? A velit sed molestias
ad rem, ipsam sequi odit tempore quae, ex laborum fugiat hic. Assumenda mollitia eos quisquam veritatis
architecto nemo temporibus omnis perspiciatis odio voluptatibus cumque sint culpa quasi doloribus ipsa aperiam
asperiores ratione nisi consequatur, quas magni vel id? Adipisci harum similique laboriosam ex aliquid nobis
libero! Assumenda eligendi et sint officiis ipsa culpa repellendus. At, ad odio repellendus officia enim
praesentium nobis numquam aut animi laudantium voluptates ipsam autem distinctio assumenda totam tempore?
Mollitia cumque quos veniam quidem adipisci voluptatibus voluptas sapiente et, ratione, atque deleniti
perspiciatis! Rem in qui magnam quas facilis error, delectus obcaecati nobis culpa itaque temporibus iste maxime
harum explicabo dolor omnis quam asperiores laudantium, corporis assumenda quo. Iure accusantium natus
consequatur repellendus odio, repellat corrupti sequi placeat neque cumque exercitationem porro quo, illum
molestias a delectus doloremque! Numquam recusandae quibusdam minima laboriosam excepturi odio placeat
consequatur, voluptate optio harum, labore sed? Porro labore amet ratione consequuntur quasi, obcaecati eum
explicabo totam distinctio laboriosam perspiciatis sapiente laborum id debitis neque alias deserunt, commodi
blanditiis nemo? Mollitia, veritatis minima voluptate maiores doloribus dolorem totam porro saepe explicabo! Et
molestiae incidunt officiis quibusdam, animi sint culpa odit sed ullam aperiam, corporis in suscipit accusantium
facere voluptatem aspernatur itaque blanditiis nemo consequuntur dolorum fugit tempore. Beatae non odit unde
eaque ad deserunt nisi dolor expedita laborum nihil est eius repellat iusto optio, commodi culpa sit facere
ducimus exercitationem blanditiis officia tempora modi accusamus? Facilis dignissimos, recusandae quibusdam ea
magnam porro veniam saepe accusantium. Fuga, officiis. Ratione nesciunt eos esse placeat voluptate. Officiis,
minus sapiente commodi amet optio atque accusantium odio mollitia a quisquam rem porro ut ipsa architecto
blanditiis incidunt reiciendis qui error illum vitae fugiat velit? Maxime blanditiis, eveniet, officia quos
pariatur debitis doloribus commodi culpa et dolores quae beatae esse vero ex veritatis nostrum. Vero, neque
doloremque. Ipsum sunt, nam eum tempora voluptatibus culpa eligendi, sequi qui harum, quasi rerum quidem.
Tenetur eos iure vitae. Est error magnam inventore fugiat voluptatum repellendus vel! Cupiditate praesentium
harum nulla rem voluptates quisquam quibusdam error expedita dolor id magni adipisci, neque atque officiis.
Impedit illum voluptatibus facere distinctio expedita quis assumenda pariatur, molestias, nisi numquam culpa,
eius excepturi! Eligendi asperiores deserunt fugit maxime dolorum vitae enim. Pariatur eligendi veniam corrupti
inventore, molestias fugit! Aliquid inventore, iste saepe reiciendis libero molestias impedit rem animi numquam,
in esse distinctio possimus odio fugit! Sed eligendi quibusdam impedit, ea repudiandae, delectus a laudantium
natus nobis saepe quam. Molestias assumenda dicta repellendus minus dignissimos officiis earum similique, ipsam
minima ut sint facilis dolor qui vero laudantium repudiandae, ab saepe ipsa odit corporis expedita esse. Eos,
harum voluptate, autem dolor dicta facere quibusdam mollitia veritatis enim repudiandae, voluptas provident iste
unde ea dolores repellendus impedit ullam? Facilis natus sunt possimus, quos laboriosam accusantium doloremque
quo temporibus est culpa. Quas, tempora quaerat exercitationem commodi labore, repudiandae vitae iure ipsum
maxime quis placeat fuga veniam velit incidunt dignissimos saepe quibusdam ad repellat illo vero et aperiam.
Temporibus eius labore iure distinctio. Maiores officiis nobis asperiores ipsum repellat dolores ullam, numquam
reprehenderit esse voluptatem eaque dicta doloremque hic magni corrupti at odio voluptates delectus non
architecto accusamus possimus sed? Corporis tempora ullam illo necessitatibus aspernatur in eaque exercitationem
laudantium tenetur sed debitis impedit blanditiis vero, praesentium nobis asperiores totam non facere deserunt
dolore voluptatum? Velit adipisci reiciendis neque aut quibusdam labore corporis quam sequi, dicta amet dolorum
minima doloribus, illo ex. Voluptatem, distinctio assumenda! Laborum totam vitae ea, ex cum quisquam eaque
nesciunt ipsam, similique beatae et molestias voluptatum odio porro sapiente reprehenderit minus sed voluptate
voluptates accusamus esse? Eligendi at dolore blanditiis facilis delectus.
</p>
</body>
</html>So here is the code which help you to build this custom scrollbar.
I also apply this in my website you can check it!!!
Here is another code which you browse provided below it helps you to create the custom scrollbar in any div not entire html here i give the "code" tag you configure your own element you only replace "code" with your desire element ```var a = document.querySelectorAll('code');```.
e.g.e;- var a = document.querySelectorAll('div ,p'); but make sure to use div properly and it is own risk.
In below👇 is the HTML SNIPPET!!! CODE.
<!-- scrollbar.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="main.js"></script>
<pre>
<h1 style="text-align: center;">How to make custom scrollbar</h1>
</pre>
<hr />
<hr />
<hr />
<div class="code-container">
<pre class="code-block">
<code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scrollbar;/title>
</head>
<body>
<pre>
<h1 style="text-align: center;">How to make custom scrollbar</h1>
</pre>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore minus tempore ratione explicabo asperiores?m
repudiandae repellat deserunt, porro soluta. Sapiente
nostrum vel, animi ullam at facilis quae, debitis assumenda, consectetur dicta quasi error ipsa. Incidunt totam
quidem adipisci tenetur soluta corrupti ea ducimus modi itaque accusamus tempore eos esse, cum odit iure eum
fugiat nulla enim hic, dignissimos qui. Repellendus, optio minima aut officia, nisi mollitia totam corporis
laudantium quos eveniet perferendis similique maxime nulla non ad pariatur. Vel ad quos perspiciatis eveniet
quisquam quo sunt inventore commodi porro? Tempora omnis laudantium, totam architecto officiis nesciunt culpa et
neque, qui nemo odit molestias magni quas voluptate unde? Perferendis illo dolore illum est, ex magni sint sunt
quos officia eveniet rerum recusandae deserunt veritatis corporis at reiciendis fugiat sed minus unde earum!
Commodi mollitia itaque ab, vero cum ullam impedit sit, voluptates eveniet asperiores voluptatibus a! Obcaecati,
sunt, at cum exercitationem, ullam eveniet provident necessitatibus pariatur adipisci perspiciatis numquam!
Fugit dolorem maxime aliquam ullam similique deleniti laboriosam ratione quis qui placeat rerum, deserunt quae
facilis modi odio illo nesciunt corporis sed? Odit, dicta dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, id ducimus. Voluptatem suscipit, distinctio
incidunt quisquam, quaerat, accusamus adipisci nihil odit eligendi quos illum ea veritatis. Corrupti deleniti
quaerat, cupiditate ipsa iure quae. Voluptates, minus ullam. Nobis accusamus, quas quibusdam deserunt, quae
possimus dignissimos quo quis veniam molestias porro similique, minima necessitatibus debitis tempora. Provident
unde dignissimos tenetur cumque excepturi natus dolorum incidunt, libero quis quaerat vitae ut aliquid
laudantium dolorem consequuntur itaque, dicta ratione? Saepe ex eius maiores quis tenetur amet distinctio
eligendi voluptate, doloribus mollitia ab adipisci fuga nam, consectetur consequatur reiciendis omnis
praesentium explicabo facere perspiciatis illum! Vitae qui pariatur quos aliquid aperiam minus a. Vel tempora
molestiae, nobis saepe totam cumque! Ullam sapiente laboriosam distinctio laudantium optio facere, atque ad
itaque officia earum sit. Odit est commodi minus quos. Delectus necessitatibus voluptatum cum? Iste, eaque
laborum quo ratione tenetur neque veritatis aut quam. Possimus distinctio molestiae praesentium, quia itaque
placeat inventore perspiciatis eius totam reiciendis aliquid et labore explicabo a eum quod ducimus voluptatem
sequi iure ea fugiat. At, mollitia eius, quaerat, numquam maiores tenetur unde et nemo excepturi sequi molestias
voluptatem consequuntur officiis velit laudantium cum nesciunt quo a voluptates quasi libero. Tempore aliquid
iure culpa hic, nobis quidem corporis, deserunt perferendis odio praesentium debitis atque, recusandae ullam
molestias est. Nam veritatis molestias quam corporis fugit placeat odio rerum eum, fuga suscipit incidunt
cupiditate consequuntur et. Vero excepturi cumque adipisci voluptatibus soluta magni, placeat quod sed
perspiciatis magnam voluptates, deserunt temporibus ducimus in deleniti quas, fuga saepe tempora. Aut suscipit
autem laborum quos accusantium assumenda iure nisi sint est quidem magni soluta libero dolorum saepe quaerat
beatae aperiam, fuga perspiciatis eum velit iusto, quis facere. Sequi temporibus suscipit, nostrum unde
necessitatibus laborum earum distinctio odio dolorem, dignissimos cupiditate cumque deleniti sapiente recusandae
quos laudantium aspernatur quasi ipsum saepe dicta reiciendis. Sapiente maxime impedit saepe perspiciatis quas
facere autem cum cumque similique magnam. Aut veritatis ipsam, enim necessitatibus iusto modi nam rerum ad
voluptatibus sequi. Pariatur, architecto doloribus cupiditate exercitationem voluptates voluptate nemo, iusto
nostrum consequatur necessitatibus soluta ad repellat deleniti doloremque. Cum sint, sunt eligendi aliquid odit
officiis animi neque nostrum modi nemo sit impedit earum accusantium eaque aliquam laudantium dolore ducimus
quas illum recusandae exercitationem eveniet. Rerum amet voluptatem, optio sunt praesentium esse non deserunt.
Inventore nostrum consectetur autem excepturi nesciunt rem optio beatae ducimus in. Ducimus neque dicta impedit
quas suscipit delectus nisi tempore at corporis iste, dignissimos nemo voluptate et corrupti explicabo
reprehenderit eligendi vero debitis minus quam id. Dolore vitae alias tempore earum pariatur quas debitis
consequuntur optio facere. Modi a ratione nihil nulla rem laborum, consequatur doloremque quam ipsum dignissimos
perferendis facilis nesciunt incidunt fuga libero itaque, repellendus doloribus excepturi, eaque voluptatum
alias laudantium enim. Excepturi modi iusto libero blanditiis eligendi ducimus, dolorem consectetur animi
tempore, placeat eius nesciunt architecto, alias facere pariatur corporis laborum quo aut illum nulla officia
ullam iste ex. Natus consequuntur nobis nisi, blanditiis sequi dolorum repellendus aperiam similique debitis
quas quidem quisquam ratione eaque. Ipsa, ratione fugiat repellendus aspernatur iure repudiandae numquam
corrupti tenetur esse consequuntur odio dolorem quam atque iusto provident cum, impedit error? Laboriosam
ratione autem, quibusdam cupiditate culpa molestias accusantium dicta! Aspernatur eaque hic dolore quisquam aut,
inventore cupiditate qui provident itaque quos deleniti exercitationem sint minus at numquam vero doloribus?
Esse reiciendis, quasi est quibusdam possimus neque quis voluptatum veritatis aliquam similique tenetur nostrum
modi, ducimus recusandae culpa minima itaque illum sunt expedita eligendi odit corporis. Tempore facere ullam,
possimus omnis corrupti suscipit quae saepe perferendis quas iusto blanditiis et aperiam natus in maiores! Nulla
consequatur, perspiciatis dignissimos error numquam laudantium. Blanditiis, ullam dolore accusantium officiis
aspernatur, voluptatibus autem debitis rem deleniti nemo unde quia nobis porro, voluptate perferendis velit
dolorem dolorum. Deserunt unde accusamus ab ducimus dolor quidem, ea, nam molestias rem atque provident
excepturi odio quia. Rem vero repellat, maxime voluptates iusto exercitationem quibusdam dolores excepturi nulla
minima quisquam non esse vel eos in mollitia pariatur, culpa velit sit eveniet molestias accusantium rerum.
Soluta laborum, dolore deserunt quas aut laboriosam molestiae, dolorum rem, debitis beatae cum error illum fugit
excepturi officia maxime. Aperiam optio deleniti architecto quidem ullam. Eum animi odit voluptate
necessitatibus, esse adipisci neque qui sint nobis maiores mollitia vero aut assumenda consequuntur aliquid
nesciunt ipsum consectetur quae pariatur illo. Ipsam vitae praesentium atque, ut quas facere iusto, molestiae
voluptatibus, dignissimos minima itaque non? Dolor, non debitis adipisci consequuntur reprehenderit voluptas
exercitationem ipsum error, blanditiis ullam similique impedit in vel. Quam mollitia, nesciunt iste nostrum ab
deleniti, autem earum id repellat sit hic fugiat, alias at modi quibusdam tempore natus. Magni eaque soluta
nihil reprehenderit eligendi. Atque ipsam aperiam natus a eveniet ea alias, saepe voluptatem necessitatibus et
molestiae est voluptatum deserunt ducimus? Velit voluptas quidem corrupti obcaecati officiis, voluptates nisi
quaerat odit sit ratione explicabo a? Lorem ipsum dolor, sit amet consectetur adipisicing elit. In, ipsa odio
iure necessitatibus corrupti recusandae repellendus aliquam animi voluptatem sit quaerat dicta. Libero
voluptatem officia officiis eligendi ad velit quos voluptates aliquam ratione! Nesciunt molestias nostrum
facilis reprehenderit quis necessitatibus rem, totam doloribus culpa maiores. Quibusdam odio aliquid ratione et
itaque repellendus praesentium maxime delectus? Assumenda dolorem quis officiis quaerat excepturi, labore,
inventore rem impedit laboriosam aliquam animi quae sapiente distinctio? Provident in impedit voluptas dolor
eius, tempora id. Maiores exercitationem nisi accusamus necessitatibus labore cum magni suscipit placeat autem
voluptates, dolorum harum adipisci sint reprehenderit officia repellendus ducimus veniam soluta dolore
repudiandae eveniet iure molestias iusto quibusdam. Accusamus nemo omnis maxime a! Ipsa, impedit veniam. Non
corporis voluptates ratione, fugit temporibus quibusdam vero eveniet officiis laboriosam optio est totam
veritatis tenetur recusandae a! Deleniti doloremque fugit eum earum nulla delectus unde accusantium ullam
exercitationem autem magnam tempore, tenetur possimus accusamus sequi voluptate, blanditiis saepe laudantium.
Beatae rem consequuntur aliquam quia deserunt officiis incidunt, quidem autem iure doloribus, impedit
reprehenderit adipisci quisquam obcaecati quod iusto. Iure, nisi. Odio quas dolor at assumenda doloremque
dolorem minus cum ab dolore dicta enim quam hic possimus ipsa molestias reiciendis, laborum, atque dolores magni
a commodi. Qui culpa id nulla et expedita commodi laudantium magni exercitationem cumque soluta? Ratione, fugiat
in accusamus natus exercitationem vitae laudantium vel recusandae aspernatur consequatur earum at rem et
cupiditate cum. Soluta odit nulla laboriosam sapiente rerum impedit veniam dolor ipsa. Perspiciatis esse
obcaecati dolores. Modi vel eligendi veniam laborum, inventore omnis ratione ullam assumenda facilis laboriosam
autem praesentium qui doloremque, eveniet sit excepturi nulla architecto debitis molestiae ex deserunt mollitia
sint quam ad. Quibusdam saepe nisi quas consectetur, praesentium autem dolores repellendus rem eligendi numquam,
voluptate provident, nobis impedit ratione? Incidunt id laudantium, ut obcaecati et maxime error excepturi rem
similique deserunt iure esse corporis ea porro odit? Beatae ab quas magnam cumque reprehenderit molestiae
laboriosam, aliquid odit natus, libero incidunt adipisci esse reiciendis praesentium nostrum explicabo quae
inventore unde dolore deserunt assumenda accusantium! Quidem dignissimos iste impedit ex quo suscipit unde atque
omnis, in est, aperiam placeat explicabo laborum. Quis, vitae odit? Perferendis minus error repellendus
aspernatur architecto nostrum omnis sit delectus dolorum amet nulla possimus qui sunt consequuntur deleniti
laborum eius quo, dignissimos obcaecati aperiam distinctio, animi consectetur veritatis? Voluptatem voluptate
itaque, dolores eveniet deserunt consequatur voluptatum. Architecto, veniam quae alias necessitatibus
perferendis voluptas! Molestiae magni at rem, dicta praesentium voluptate, enim aliquam eum pariatur quis earum
blanditiis, adipisci consectetur beatae reprehenderit inventore voluptas molestias voluptatibus deleniti?
Voluptatum illum suscipit iusto ut labore minus assumenda doloremque voluptate eius voluptatem facilis expedita
architecto omnis, alias iure similique dolorem magnam itaque quod quaerat? Corporis nulla labore, exercitationem
quas quam, aliquid officiis neque ab minima excepturi est ullam cumque quia mollitia! Quis ab, maiores tenetur
quos consequatur iste hic est necessitatibus cumque unde obcaecati modi provident ipsum. Eum impedit quo
voluptates et quis neque eaque unde odit adipisci error earum, eius magni alias reiciendis esse in laborum quae,
voluptatum repellat vel quod consequuntur! Deleniti quia minima beatae reprehenderit commodi eaque impedit
perferendis recusandae nisi, facilis quibusdam quas, aut facere temporibus fugiat a neque tempore! Nulla cumque
porro consequuntur provident ut, quod alias delectus enim suscipit ab, soluta consequatur, totam ea quae illo
sit. At quos culpa eligendi voluptates fuga? Aliquid dolor voluptas, libero officiis quis fugiat repellat
voluptate hic placeat quia perferendis! Consectetur, itaque. Sed cum totam molestias quasi velit aliquam optio
animi sit est qui ipsa sunt voluptatum, laboriosam modi eum mollitia deleniti quaerat perspiciatis, tempora
consequatur assumenda vitae? Laborum quia, autem quidem quasi iusto architecto officiis nihil magni tempore
minus odio eveniet repellendus eaque vero unde, error earum nostrum! Tempora consequatur magnam veritatis aut
debitis accusamus error suscipit sint cum, exercitationem facere eveniet nulla pariatur dolore inventore quae
enim nobis aperiam voluptatem fuga? Optio cum iusto in perspiciatis saepe assumenda voluptates architecto,
cupiditate totam dolor cumque, laborum laudantium! Mollitia repellendus quo iure voluptatum ducimus numquam
provident illo? Quas reiciendis beatae cumque maiores ipsum facilis. Assumenda deleniti, dolores placeat
pariatur non ullam ut animi, asperiores cupiditate aut nemo. Nisi autem tempore eaque a expedita provident
numquam! Adipisci, quaerat molestias! Ratione quisquam odit fuga facere numquam in repudiandae aliquam.
Recusandae ea possimus delectus consequatur ipsum? Eligendi eum nisi consectetur, voluptatem dolore sunt porro
rerum commodi optio illum eaque quo quaerat quae exercitationem excepturi, ipsa itaque dolorem odio, repellat
atque adipisci dolores harum voluptas laboriosam? Mollitia ipsa eaque voluptatem distinctio nesciunt ratione?
Accusamus aut officia quae corrupti voluptatem ipsa laborum! At incidunt dicta quas obcaecati! Eius, sequi
aliquam voluptatibus voluptates laboriosam magnam, iure odit aperiam mollitia aut odio eaque sint deleniti.
Ipsum incidunt harum voluptatibus cupiditate, non laboriosam ut. Deleniti quia dolore recusandae iusto quidem
repudiandae accusamus! Voluptates, fugiat dolores sapiente sit enim vero at culpa quia quis aperiam quaerat
asperiores repudiandae veniam quo? Iste quaerat dolores dolore ducimus. Facere quae architecto dolor blanditiis
iste modi error nostrum at voluptatem! Facilis dolores non quisquam, dolorem hic tempore excepturi quibusdam
molestiae commodi temporibus. Iure alias eveniet esse repudiandae, nam, beatae asperiores sint voluptatum odio
sit delectus illum vel temporibus ad explicabo quam ducimus hic iste! Culpa vitae sunt facere, expedita beatae
nam nemo nisi eum voluptatibus consequatur animi veritatis neque, id obcaecati cupiditate. Exercitationem
nesciunt id dicta harum accusantium, enim cumque dignissimos delectus ad voluptatem consequuntur dolorem odio
tempore, quos laboriosam odit a non necessitatibus, dolor autem perferendis? Maiores hic quos culpa. Ipsa non
labore tempore eum. Aliquam, ratione veniam, aliquid deleniti, alias quaerat quas numquam soluta velit quae
nesciunt. Laudantium repellendus, nulla iusto nam inventore laborum qui maxime minus ut? Nesciunt, consequuntur
modi! Non maxime illo quasi sequi natus dicta architecto. Ullam, error cumque est vel sapiente perspiciatis ex
commodi eius voluptatibus neque repellendus dolores, ab sint dolorem nemo necessitatibus expedita magnam sit.
Laudantium id cum similique dignissimos explicabo corporis nemo quidem tenetur! Consequuntur perspiciatis
distinctio ipsa, aspernatur, sed iste libero optio culpa repellat beatae molestiae in laboriosam. Aliquid
adipisci nam repudiandae repellendus, itaque dignissimos quam voluptatibus! Adipisci, libero cumque.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem facilis doloremque culpa blanditiis
voluptas odit reiciendis, fugiat dicta a illum? Accusamus error facilis reprehenderit et, fugit voluptatum odit
cumque dolore eum velit vitae dolorem in voluptates, veritatis maiores hic voluptatibus praesentium pariatur
saepe nulla sequi commodi, assumenda blanditiis iste! Debitis voluptatum ipsam aliquid nobis impedit nemo amet
id dolores necessitatibus corrupti possimus blanditiis quos consequatur earum ipsa qui nihil perspiciatis,
inventore minus, neque voluptates! Ex, officiis perspiciatis natus commodi esse adipisci perferendis expedita
nostrum dolorum. Similique incidunt ad reiciendis doloribus, illo architecto cum perferendis. Totam omnis
adipisci assumenda alias ipsum, odio similique placeat? Debitis dolor iste soluta voluptatum odit voluptate.
Dolores ab et excepturi vero rem amet nemo quaerat quod sapiente tenetur. Veritatis mollitia atque ut, excepturi
corporis officia, amet ipsa vel, asperiores minima alias! Incidunt ipsa dicta quibusdam eum maiores doloremque
libero placeat necessitatibus iure vel. Vitae quae nisi, itaque molestias omnis magnam animi aliquam
exercitationem. Possimus, aperiam repudiandae ipsam ea quidem obcaecati cumque voluptas quam architecto aut
nobis qui consequuntur maiores? Autem temporibus odit tempora sunt reprehenderit unde, sit officia laborum hic a
dicta at. Inventore harum dolore vel ratione, omnis quos dolorum dolorem, voluptatibus blanditiis quasi corrupti
quo sit quis obcaecati porro recusandae nemo aut nostrum? Exercitationem et, blanditiis inventore beatae
possimus perspiciatis aut itaque, neque tempore quasi quis nihil natus sequi repudiandae, voluptates aperiam ea
facere? Nulla, excepturi animi. Dicta delectus deleniti magni nulla. Quia eligendi reprehenderit deserunt fuga
asperiores! Voluptates in quaerat rerum impedit, quo sequi commodi illo saepe distinctio minima voluptatum
accusantium necessitatibus quia asperiores, ipsum nostrum quibusdam dolore, dolores velit suscipit maxime
similique possimus! Architecto nam atque quam maiores. Non voluptate ipsum, dolore ab, nemo nobis sed, ipsam
laborum tenetur similique mollitia corrupti aspernatur? Magni labore incidunt minima delectus autem. Recusandae
itaque pariatur incidunt praesentium expedita ullam dolorum tenetur eaque quae. Pariatur illum quas eius nisi
corporis? Sint vel adipisci animi assumenda, commodi magnam molestiae esse fugit non, magni obcaecati aliquid
nobis, doloremque saepe recusandae ex. Veniam modi placeat hic enim porro illum debitis quasi sapiente officiis
labore animi nam error quae reiciendis ipsum quam, est sed possimus distinctio ipsa sequi adipisci in! Modi
blanditiis atque unde, architecto, placeat impedit nesciunt, maiores reprehenderit enim aliquam quaerat
aspernatur perspiciatis vero assumenda labore excepturi. Nihil vel laborum, sint quas tempora explicabo dolorum
maiores ad itaque, similique labore fugit, ipsum aperiam voluptatem odit error sit quod? A velit sed molestias
ad rem, ipsam sequi odit tempore quae, ex laborum fugiat hic. Assumenda mollitia eos quisquam veritatis
architecto nemo temporibus omnis perspiciatis odio voluptatibus cumque sint culpa quasi doloribus ipsa aperiam
asperiores ratione nisi consequatur, quas magni vel id? Adipisci harum similique laboriosam ex aliquid nobis
libero! Assumenda eligendi et sint officiis ipsa culpa repellendus. At, ad odio repellendus officia enim
praesentium nobis numquam aut animi laudantium voluptates ipsam autem distinctio assumenda totam tempore?
Mollitia cumque quos veniam quidem adipisci voluptatibus voluptas sapiente et, ratione, atque deleniti
perspiciatis! Rem in qui magnam quas facilis error, delectus obcaecati nobis culpa itaque temporibus iste maxime
harum explicabo dolor omnis quam asperiores laudantium, corporis assumenda quo. Iure accusantium natus
consequatur repellendus odio, repellat corrupti sequi placeat neque cumque exercitationem porro quo, illum
molestias a delectus doloremque! Numquam recusandae quibusdam minima laboriosam excepturi odio placeat
consequatur, voluptate optio harum, labore sed? Porro labore amet ratione consequuntur quasi, obcaecati eum
explicabo totam distinctio laboriosam perspiciatis sapiente laborum id debitis neque alias deserunt, commodi
blanditiis nemo? Mollitia, veritatis minima voluptate maiores doloribus dolorem totam porro saepe explicabo! Et
molestiae incidunt officiis quibusdam, animi sint culpa odit sed ullam aperiam, corporis in suscipit accusantium
facere voluptatem aspernatur itaque blanditiis nemo consequuntur dolorum fugit tempore. Beatae non odit unde
eaque ad deserunt nisi dolor expedita laborum nihil est eius repellat iusto optio, commodi culpa sit facere
ducimus exercitationem blanditiis officia tempora modi accusamus? Facilis dignissimos, recusandae quibusdam ea
magnam porro veniam saepe accusantium. Fuga, officiis. Ratione nesciunt eos esse placeat voluptate. Officiis,
minus sapiente commodi amet optio atque accusantium odio mollitia a quisquam rem porro ut ipsa architecto
blanditiis incidunt reiciendis qui error illum vitae fugiat velit? Maxime blanditiis, eveniet, officia quos
pariatur debitis doloribus commodi culpa et dolores quae beatae esse vero ex veritatis nostrum. Vero, neque
doloremque. Ipsum sunt, nam eum tempora voluptatibus culpa eligendi, sequi qui harum, quasi rerum quidem.
Tenetur eos iure vitae. Est error magnam inventore fugiat voluptatum repellendus vel! Cupiditate praesentium
harum nulla rem voluptates quisquam quibusdam error expedita dolor id magni adipisci, neque atque officiis.
Impedit illum voluptatibus facere distinctio expedita quis assumenda pariatur, molestias, nisi numquam culpa,
eius excepturi! Eligendi asperiores deserunt fugit maxime dolorum vitae enim. Pariatur eligendi veniam corrupti
inventore, molestias fugit! Aliquid inventore, iste saepe reiciendis libero molestias impedit rem animi numquam,
in esse distinctio possimus odio fugit! Sed eligendi quibusdam impedit, ea repudiandae, delectus a laudantium
natus nobis saepe quam. Molestias assumenda dicta repellendus minus dignissimos officiis earum similique, ipsam
minima ut sint facilis dolor qui vero laudantium repudiandae, ab saepe ipsa odit corporis expedita esse. Eos,
harum voluptate, autem dolor dicta facere quibusdam mollitia veritatis enim repudiandae, voluptas provident iste
unde ea dolores repellendus impedit ullam? Facilis natus sunt possimus, quos laboriosam accusantium doloremque
quo temporibus est culpa. Quas, tempora quaerat exercitationem commodi labore, repudiandae vitae iure ipsum
maxime quis placeat fuga veniam velit incidunt dignissimos saepe quibusdam ad repellat illo vero et aperiam.
Temporibus eius labore iure distinctio. Maiores officiis nobis asperiores ipsum repellat dolores ullam, numquam
reprehenderit esse voluptatem eaque dicta doloremque hic magni corrupti at odio voluptates delectus non
architecto accusamus possimus sed? Corporis tempora ullam illo necessitatibus aspernatur in eaque exercitationem
laudantium tenetur sed debitis impedit blanditiis vero, praesentium nobis asperiores totam non facere deserunt
dolore voluptatum? Velit adipisci reiciendis neque aut quibusdam labore corporis quam sequi, dicta amet dolorum
minima doloribus, illo ex. Voluptatem, distinctio assumenda! Laborum totam vitae ea, ex cum quisquam eaque
nesciunt ipsam, similique beatae et molestias voluptatum odio porro sapiente reprehenderit minus sed voluptate
voluptates accusamus esse? Eligendi at dolore blanditiis facilis delectus.
</p>
</body>
</html>
</code>
</pre>
</div>
<div>
<div class="code-container">
<pre class="code-block">
<code>
<html>
<div class="do"></div>
<p>This is a paragraph </p>
</html><html>
<div class="do"></div>
<p>This is a paragraph </p>
</html>
</code>
</pre>
</div>
</body>
</html>Here in below👇 is the required ```style.css``` for scrollbar you can edit according to your comfort.
/*style.css*/
::-webkit-scrollbar {
width: 0;
height: 0;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-image: linear-gradient(45deg, rgba(23, 45, 67), rgb(68, 96, 124));
}
.custom-scrollbar-track-div {
z-index: 111;
position: absolute;
visibility: hidden;
border-radius: 40px;
overflow: hidden;
background-image: linear-gradient(to left, #52595e, #121f2c);
position: absolute;
height: 10px;
margin-top: 0vh;
bottom: 0;
left: 0;
animation: scbar1 5s ease-in-out infinite forwards reverse;
}
.custom-scrollbar-track-div:hover {
visibility: visible;
opacity: 0.7;
border-radius: 100px;
overflow: hidden;
background-color: blue;
position: absolute;
height: 20px;
bottom: 0;
left: 0;
animation: scbar1 5s ease-in-out infinite forwards;
}
.custom-scrollbar-track-div:hover .custom-scrollbar-div {
visibility: visible;
height: 20px;
}
.custom-scrollbar-div {
box-shadow: 0px 3px 1px rgba(27, 57, 66, 0.781);
visibility: visible;
border-radius: 40px;
bottom: 0;
overflow: hidden;
position: relative;
width: 10vw;
height: 10px;
background-image: linear-gradient(to left, #833ab4, #fd1d1d, #fcb045);
animation: scbar2 5s ease-in-out infinite forwards alternate;
}
.custom-scrollbar-div::before {
content: '';
filter: blur(10px);
box-shadow: 0px 3px 1px rgba(27, 57, 66, 0.781);
visibility: visible;
border-radius: 40px;
bottom: 0;
overflow: hidden;
position: relative;
width: 10vw;
height: 10px;
background-image: linear-gradient(to left, #833ab4, #fd1d1d, #fcb045);
}
.custom-scrollbar-div::after {
content: '';
filter: blur(30px);
box-shadow: 0px 3px 1px rgba(27, 57, 66, 0.781);
visibility: visible;
border-radius: 40px;
bottom: 0;
overflow: hidden;
position: relative;
width: 10vw;
height: 10px;
background-image: linear-gradient(to left, #833ab4, #fd1d1d, #fcb045);
}
@keyframes scbar1 {
0%,
100% {
filter: opacity(0.9) brightness(100%) contrast(100%) hue-rotate(0deg);
}
50% {
filter: opacity(0.4) brightness(200%) contrast(150%) hue-rotate(360deg);
}
}
@keyframes scbar2 {
0%,
100% {
filter: contrast(120%) drop-shadow(0px 0px 0px hsla(189, 13%, 20%, 0.473)) opacity(1) hue-rotate(0deg);
}
50% {
filter: contrast(150%) drop-shadow(0px 3px 5px hsla(189, 13%, 20%, 0.473)) opacity(0.7) hue-rotate(360deg);
}
}
@keyframes scbar3 {
0%,
100% {
filter: opacity(1) brightness(100%) contrast(100%) hue-rotate(0deg);
}
50% {
filter: opacity(0.7) brightness(200%) contrast(200%) hue-rotate(360deg);
}
}
.custom-scrollbar-div:active {
border-radius: 100px;
height: 20px;
animation: scbar3 5s ease-in-out infinite forwards;
cursor: grab;
user-select: none;
}
.custom-scrollbar-div:hover {
border-radius: 100px;
height: 20px;
cursor: grab;
user-select: none;
animation: scbar3 5s ease-in-out infinite forwards;
}
.custom-scrollbar-track-div-v {
z-index: 999;
position: absolute;
visibility: hidden;
border-radius: 40px;
overflow: hidden;
background-image: linear-gradient(to top, #52595e, #121f2c);
position: absolute;
width: 10px;
margin-top: 0vh;
top: 2em;
right: 0;
animation: scbar1 5s ease-in-out infinite forwards reverse;
}
.custom-scrollbar-track-div-v:hover {
visibility: visible;
opacity: 0.7;
border-radius: 100px;
overflow: hidden;
background-color: blue;
position: absolute;
width: 20px;
top: 2em;
right: 0;
animation: scbar1 5s ease-in-out infinite forwards;
}
.custom-scrollbar-track-div-v:hover .custom-scrollbar-div-v {
visibility: visible;
width: 20px;
}
.custom-scrollbar-div-v {
box-shadow: 0px 3px 1px rgba(27, 57, 66, 0.781);
visibility: visible;
border-radius: 40px;
overflow: hidden;
position: relative;
width: 10px;
height: 10vh;
background-image: linear-gradient(to top, #833ab4, #fd1d1d, #fcb045);
animation: scbar2 5s ease-in-out infinite forwards alternate;
}
.custom-scrollbar-div-v::before {
content: '';
filter: blur(10px);
box-shadow: 0px 3px 1px rgba(27, 57, 66, 0.781);
visibility: visible;
border-radius: 40px;
overflow: hidden;
position: relative;
width: 10px;
height: 10vh;
background-image: linear-gradient(to top, #833ab4, #fd1d1d, #fcb045);
}
.custom-scrollbar-div-v::after {
content: '';
filter: blur(30px);
box-shadow: 0px 3px 1px rgba(27, 57, 66, 0.781);
visibility: visible;
border-radius: 40px;
top: 2em;
overflow: hidden;
position: relative;
width: 10px;
height: 10vh;
background-image: linear-gradient(to top, #833ab4, #fd1d1d, #fcb045);
}
@keyframes scbar1 {
0%,
100% {
filter: opacity(0.9) brightness(100%) contrast(100%) hue-rotate(0deg);
}
50% {
filter: opacity(0.4) brightness(200%) contrast(150%) hue-rotate(360deg);
}
}
@keyframes scbar2 {
0%,
100% {
filter: contrast(120%) drop-shadow(0px 0px 0px hsla(189, 13%, 20%, 0.473)) opacity(1) hue-rotate(0deg);
}
50% {
filter: contrast(150%) drop-shadow(0px 3px 5px hsla(189, 13%, 20%, 0.473)) opacity(0.7) hue-rotate(360deg);
}
}
@keyframes scbar3 {
0%,
100% {
filter: opacity(1) brightness(100%) contrast(100%) hue-rotate(0deg);
}
50% {
filter: opacity(0.7) brightness(200%) contrast(200%) hue-rotate(360deg);
}
}
.custom-scrollbar-div-v:active {
border-radius: 100px;
width: 20px;
animation: scbar3 5s ease-in-out infinite forwards;
cursor: grab;
user-select: none;
}
.custom-scrollbar-div-v:hover {
border-radius: 100px;
width: 20px;
cursor: grab;
user-select: none;
animation: scbar3 5s ease-in-out infinite forwards;
}
p,
h1 {
color: #42c4d841;
font-family: Balsamiq Sans;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.code-container {
position: relative;
margin: 0;
padding: 0;
box-sizing: border-box;
cursor: text;
}
code {
max-height: 100px;
overflow: auto;
}
.btn_copy {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 2em;
right: 1em;
width: 4em;
height: 2em;
}Here in below👇 is the required ```main.js``` for scrollbar you can edit according to your comfort.
//main.js
//It work both in mobile and website here touch event and mouse event both works normally.
/*Copyright scienhac
origin: https://scienhac.blogspot.com
*/
document.addEventListener("DOMContentLoaded", function () {
window.addEventListener("load", () => {
const func_ver_m = () => {
let isDragging = false;
let startY = 0;
let scrollTop = 0;
let startX = 0;
let scrollLeft = 0;
let scrollRight = 0;
const isTouchDevice = 'ontouchstart' in document.documentElement;
const scrollEvent = isTouchDevice ? 'touchmove' : 'scroll';
const startEvent = isTouchDevice ? 'touchstart' : 'mousedown';
const endEvent = isTouchDevice ? 'touchend' : 'mouseup';
const moveEvent = isTouchDevice ? 'touchmove' : 'mousemove';
var a = document.querySelectorAll('code');
a.forEach((a) => {
let Cst = document.createElement('div');
Cst.setAttribute('class', 'custom-scrollbar-track-div-v');
a.appendChild(Cst);
let Csb = document.createElement('div');
Csb.setAttribute('class', 'custom-scrollbar-div-v');
Cst.appendChild(Csb);
var scrollbar = a.parentNode.querySelector('.custom-scrollbar-track-div-v');
var scrollThumb = scrollbar.querySelector('.custom-scrollbar-div-v');
scrollbar.style.height = `${a.offsetHeight - 5}px`;
function setScrollThumbHeight() {
const contentHeight = a.scrollHeight;
const viewportHeight = a.offsetHeight;
const scrollbarHeight = scrollbar.offsetHeight;
const scrollThumbHeight = Math.max((viewportHeight / contentHeight) * scrollbarHeight, 30);
scrollThumb.style.height = `${scrollThumbHeight}px`;
}
let scrollbar_scrollthumb_value = () => {
if (isTouchDevice) {
scrollbar.style.visibility = 'visible';
scrollbar.style.width = '20px';
scrollThumb.style.width = '20px';
}
}
let scrollbar_scrollthumb_value_r = () => {
if (isTouchDevice) {
scrollbar.style.visibility = 'hidden';
scrollbar.style.width = '15px';
scrollThumb.style.width = '15px';
}
}
scrollbar.addEventListener(startEvent, function (event) {
scrollbar_scrollthumb_value();
document.body.style.cursor = 'grab';
const clickPosition = isTouchDevice ? event.touches[0].clientY - scrollbar.getBoundingClientRect().top : event.clientY - scrollbar.getBoundingClientRect().top;
const thumbHeight = scrollThumb.getBoundingClientRect().height;
const trackHeight = scrollbar.getBoundingClientRect().height;
const thumbPosition = clickPosition - (thumbHeight / 2);
const maxThumbTop = trackHeight - thumbHeight;
const newThumbTop = Math.min(Math.max(thumbPosition, 0), maxThumbTop);
scrollThumb.style.top = `${newThumbTop}px`;
const scrollPercent = newThumbTop / maxThumbTop;
const contentHeight = a.scrollHeight;
const totalScrollHeight = contentHeight - window.innerHeight;
const scrollPosition = totalScrollHeight * scrollPercent;
a.scrollTo({
top: scrollPosition,
left: a.scrollLeft,
});
});
scrollThumb.addEventListener(startEvent, function (e) {
document.body.style.cursor = 'grab';
isDragging = true;
startY = isTouchDevice ? e.touches[0].clientY - scrollThumb.offsetTop : e.clientY - scrollThumb.offsetTop;
scrollTop = a.scrollTop;
e.preventDefault();
});
function onTouchMove(e) {
if (isDragging) {
let newTop = isTouchDevice ? e.touches[0].clientY - startY : e.clientY - startY;
newTop = Math.max(newTop, 0);
newTop = Math.min(newTop, scrollbar.offsetHeight - scrollThumb.offsetHeight);
scrollThumb.style.top = `${newTop}px`;
const scrollPercent = newTop / (scrollbar.offsetHeight - scrollThumb.offsetHeight);
const contentHeight = a.scrollHeight;
const totalScrollHeight = contentHeight - a.offsetHeight;
const scrollPosition = totalScrollHeight * scrollPercent;
a.scrollTo({
top: scrollPosition,
left: a.scrollLeft,
});
}
}
scrollThumb.addEventListener(startEvent, () => {
document.addEventListener(moveEvent, onTouchMove);
});
document.addEventListener(endEvent, function () {
isDragging = false;
document.body.style.cursor = 'auto';
document.removeEventListener(moveEvent, onTouchMove);
scrollbar_scrollthumb_value_r();
});
a.addEventListener(scrollEvent, function () {
const contentHeight = a.scrollHeight;
const viewportHeight = a.offsetHeight;
const scrollTop = a.scrollTop;
const scrollbarHeight = scrollbar.offsetHeight;
const scrollThumbHeight = scrollThumb.offsetHeight;
const maxThumbTop = scrollbarHeight - scrollThumbHeight;
const scrollPercent = scrollTop / (contentHeight - viewportHeight);
const thumbTop = maxThumbTop * scrollPercent;
scrollThumb.style.top = `${thumbTop}px`;
});
function checkScrollbarVisibility() {
const contentHeight = a.scrollHeight;
const windowHeight = a.offsetHeight;
const isScrollable = contentHeight > windowHeight;
if (isScrollable) {
scrollThumb.style.display = 'block';
scrollbar.style.display = 'block';
} else {
scrollThumb.style.display = 'none';
scrollbar.style.display = 'none';
}
}
checkScrollbarVisibility();
setScrollThumbHeight();
window.addEventListener('resize', setScrollThumbHeight);
});
}
func_ver_m();
});
});
document.addEventListener("DOMContentLoaded", function () {
window.addEventListener("load", () => {
const func_hor_m = () => {
let isDragging = false;
let startY = 0;
let scrollTop = 0;
let startX = 0;
let scrollLeft = 0;
let scrollRight = 0;
const isTouchDevice = 'ontouchstart' in document.documentElement;
const scrollEvent = isTouchDevice ? 'touchmove' : 'scroll';
const startEvent = isTouchDevice ? 'touchstart' : 'mousedown';
const endEvent = isTouchDevice ? 'touchend' : 'mouseup';
const moveEvent = isTouchDevice ? 'touchmove' : 'mousemove';
var a = document.querySelectorAll('code');
a.forEach((a) => {
let Cst = document.createElement('div');
Cst.setAttribute('class', 'custom-scrollbar-track-div');
a.appendChild(Cst);
let Csb = document.createElement('div');
Csb.setAttribute('class', 'custom-scrollbar-div');
Cst.appendChild(Csb);
var scrollbar = a.parentNode.querySelector('.custom-scrollbar-track-div');
var scrollThumb = scrollbar.querySelector('.custom-scrollbar-div');
scrollbar.style.width = `${a.offsetWidth}px`;
function setScrollThumbWidth() {
const contentWidth = a.scrollWidth;
const viewportWidth = a.offsetWidth;
const scrollbarWidth = scrollbar.offsetWidth;
const scrollThumbWidth = Math.max((viewportWidth / contentWidth) * scrollbarWidth, 30);
scrollThumb.style.width = `${scrollThumbWidth}px`;
}
let scrollbar_scrollthumb_value = () => {
if (isTouchDevice) {
scrollbar.style.visibility = 'visible';
scrollbar.style.height = '20px';
scrollThumb.style.height = '20px';
}
}
let scrollbar_scrollthumb_value_r = () => {
if (isTouchDevice) {
scrollbar.style.visibility = 'hidden';
scrollbar.style.height = '15px';
scrollThumb.style.height = '15px';
}
}
scrollbar.addEventListener(startEvent, function (event) {
scrollbar_scrollthumb_value();
document.body.style.cursor = 'grab';
const clickPosition = isTouchDevice ? event.touches[0].clientX - scrollbar.getBoundingClientRect().left : event.clientX - scrollbar.getBoundingClientRect().left;
const thumbWidth = scrollThumb.getBoundingClientRect().width;
const trackWidth = scrollbar.getBoundingClientRect().width;
const thumbPosition = clickPosition - (thumbWidth / 2);
const maxThumbLeft = trackWidth - thumbWidth;
const newThumbLeft = Math.min(Math.max(thumbPosition, 0), maxThumbLeft);
scrollThumb.style.left = `${newThumbLeft}px`;
const scrollPercent = newThumbLeft / maxThumbLeft;
const contentWidth = a.scrollWidth;
const totalScrollWidth = contentWidth - window.innerWidth;
const scrollPosition = totalScrollWidth * scrollPercent;
a.scrollTo({
top: a.scrollTop,
left: scrollPosition,
});
});
scrollThumb.addEventListener(startEvent, function (e) {
document.body.style.cursor = 'grab';
isDragging = true;
startX = isTouchDevice ? e.touches[0].clientX - scrollThumb.offsetLeft : e.clientX - scrollThumb.offsetLeft;
scrollLeft = a.scrollLeft;
e.preventDefault();
});
function onMouseMove(e) {
if (isDragging) {
let newLeft = isTouchDevice ? e.touches[0].clientX - startX : e.clientX - startX;
newLeft = Math.max(newLeft, 0);
newLeft = Math.min(newLeft, scrollbar.offsetWidth - scrollThumb.offsetWidth);
scrollThumb.style.left = `${newLeft}px`;
const scrollPercent = newLeft / (scrollbar.offsetWidth - scrollThumb.offsetWidth);
const contentWidth = a.scrollWidth;
const totalScrollWidth = contentWidth - a.offsetWidth;
const ScrollPosition = totalScrollWidth * scrollPercent;
a.scrollTo({
top: a.scrollTop,
left: ScrollPosition,
});
}
}
function onMouseUp() {
isDragging = false;
document.body.style.cursor = 'auto';
document.removeEventListener(moveEvent, onMouseMove);
}
scrollThumb.addEventListener(startEvent, () => {
document.addEventListener(moveEvent, onMouseMove);
});
document.addEventListener(endEvent, onMouseUp);
document.addEventListener(scrollEvent, function () {
const contentWidth = a.scrollWidth;
const viewportWidth = a.offsetWidth;
const scrollbarWidth = scrollbar.offsetWidth;
const isScrolled = contentWidth > viewportWidth;
scrollbar.style.display = isScrolled ? 'block' : 'none';
setScrollThumbWidth();
const scrollPercent = a.scrollLeft / (contentWidth - viewportWidth);
const maxThumbLeft = scrollbarWidth - scrollThumb.offsetWidth;
const thumbLeft = scrollPercent * maxThumbLeft;
scrollThumb.style.left = `${thumbLeft}px`;
});
a.addEventListener(scrollEvent, (e) => {
const pxToVw = (scrollThumb.offsetWidth / a.offsetWidth) * 100;
const totalWidth = a.scrollWidth - a.clientWidth;
const initialThumbLeft = (parseInt(scrollThumb.style.left) + scrollThumb.offsetWidth) / a.offsetWidth * 100 - pxToVw;
scrollThumb.style.left = `${initialThumbLeft}vw`;
const wdA = (scrollbar.offsetWidth / a.offsetWidth) * 100 - pxToVw;
let total_allow_width = scrollbar.offsetWidth - scrollThumb.offsetWidth;
scrollThumb.style.left = `${(a.scrollLeft / totalWidth) * total_allow_width}px`;
e.preventDefault();
});
function checkScrollbarVisibility() {
const contentWidth = a.scrollWidth;
const windowWidth = a.offsetWidth;
const isScrollable = contentWidth > windowWidth;
if (isScrollable) {
scrollThumb.style.display = 'block';
scrollbar.style.display = 'block';
} else {
scrollThumb.style.display = 'none';
scrollbar.style.display = 'none';
}
}
checkScrollbarVisibility();
setScrollThumbWidth();
});
};
func_hor_m();
});
});
Hope you LIKE the code snippet ```THANK FOR YOUR``` attention.
! SCIENHAC !
***END***
.jpeg)
0 Comments
Thanks for comment.Please feedback us!