In this post i will show you how to create custom scrollbar and trust me it is dead simple to do ;)
A very serious disclaimer:- i used a very long lorem ipsum dummy text !
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scrollbar</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500;900&display=swap" rel="stylesheet">
</head>
<body>
<div id="pregressBar"></div>
<section>
<h2>
Creative Scrollbar
</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas vel atque commodi maxime debitis aperiam voluptatem cumque eligendi, facere, natus dicta voluptatibus modi aut, saepe adipisci deserunt earum impedit voluptas.
Consequuntur dignissimos suscipit iusto, fugiat aperiam sequi doloremque assumenda sint deleniti et ad? Eveniet cumque laborum, vitae rerum atque molestias natus obcaecati distinctio? Deleniti ratione, sint consequatur nemo accusamus porro?
Dolores, ullam qui? Officia doloribus vitae illo eveniet dolores provident! Quaerat reiciendis unde magni sequi sapiente ex nesciunt voluptates quam harum quisquam, ab vitae libero dolores ut? Deleniti, voluptatem harum!
Impedit beatae nihil rem incidunt ratione at praesentium ullam optio sed a soluta, atque enim vitae excepturi esse molestias magni voluptatibus? Possimus doloremque ut similique culpa quibusdam distinctio quas voluptate.
Aperiam laboriosam fugit optio itaque, doloremque error incidunt hic ab harum ratione quae cumque facilis dignissimos similique nostrum deleniti? Cupiditate pariatur earum voluptatem excepturi commodi velit molestias odio laudantium dolores?
Doloremque libero minima et sit fuga quis omnis odio, laboriosam eaque similique dolores atque error labore non cum ducimus quae officia voluptas quia rem. Officia veniam illo accusantium aut ipsa.
Amet delectus necessitatibus illum neque asperiores, perspiciatis corporis consequatur molestias nulla inventore, repellendus ratione nesciunt suscipit numquam repudiandae odio, maxime rerum officia! Recusandae, quisquam! Labore voluptatum suscipit sunt atque ab?
Cumque id repudiandae illum repellat consectetur et, a incidunt dolores quo nulla, officia molestias totam quis possimus alias quisquam neque nobis sequi aut. Harum praesentium delectus consequuntur quam autem beatae!
Totam soluta laboriosam voluptatibus sequi beatae dolorum id repellendus maiores ipsa, impedit ullam, sapiente vitae quis velit nihil molestiae ex quae illum repellat? Minima, maiores harum sint laudantium quaerat obcaecati!
Corrupti perspiciatis consequatur id dicta. Praesentium iste illo placeat delectus. Iure sapiente quas natus totam consequatur sequi non molestias adipisci, architecto atque aspernatur quo vero explicabo harum, nesciunt mollitia repellendus!
Voluptate tempore vel ab molestiae autem, rem molestias. Ipsum cum placeat animi, earum veritatis atque fuga asperiores autem perferendis numquam, recusandae quae corporis, quisquam assumenda eligendi illo explicabo doloremque eum.
Distinctio voluptatibus alias sequi nobis minima necessitatibus? Sint quae doloremque soluta fugit ab repudiandae architecto in saepe, fuga animi inventore quia exercitationem. Corporis, nisi beatae. Esse fugiat commodi ab officiis?
Ipsam dolorum iusto et nobis consectetur delectus. Tempora ut magnam magni beatae atque maiores laboriosam rerum officiis corporis delectus numquam perspiciatis ad quis temporibus voluptate, autem laborum quod? Aperiam, totam.
Nostrum quis laudantium incidunt accusantium officia, omnis nulla sapiente minima esse magni ipsum eaque ad perferendis molestias! Rem est placeat beatae, quisquam iusto numquam ea! Fugit minus excepturi magni id!
Eaque sapiente similique nam, quibusdam error veniam? Enim ducimus adipisci rem in omnis, explicabo maxime autem odio aliquid repudiandae veritatis incidunt dolor molestias velit earum. Rem, ratione? Inventore, est nam.
Nostrum architecto rerum odio ipsa quibusdam temporibus. Exercitationem dignissimos nemo sint, alias dolore quidem cumque error corporis aperiam fugiat minima consequatur, asperiores qui ipsam quisquam, natus doloremque voluptatum animi rerum.
Corporis nulla laboriosam ex animi modi libero, similique ipsum deserunt reprehenderit, ipsam, error quibusdam facere itaque veniam nostrum id. Debitis, molestias. Veniam id et obcaecati tempora cumque porro asperiores recusandae.
Repudiandae molestias doloribus optio asperiores ea similique sit commodi? Non quos inventore voluptate voluptates voluptatum vero, ducimus tenetur doloribus sed eligendi tempora natus temporibus reiciendis in tempore magni nihil aliquid.
Cumque placeat doloremque veritatis, ipsam facilis debitis veniam minus. Velit quas dignissimos perspiciatis aut numquam! Dignissimos officiis veritatis sed eius ullam? Magnam reiciendis cum nihil cupiditate voluptas, similique vel nesciunt?
Doloribus tempora dolores nihil delectus fugiat possimus nam animi quam impedit, obcaecati sunt ut iure veritatis deserunt? Minima, iusto tenetur eum excepturi ipsum cum non, repudiandae maxime minus, sint sapiente.
Illum dolorum nulla rem nostrum quos nobis, placeat sapiente fugit nemo adipisci ab, reiciendis laboriosam odio eligendi doloremque eveniet expedita possimus perferendis tenetur non incidunt maiores. Cumque perferendis quisquam nesciunt.
Tempore voluptatibus, vel similique delectus obcaecati commodi cum nihil amet corporis possimus, alias eaque molestiae aut natus quae dolor, debitis neque? Illo necessitatibus ipsum accusamus sint iusto eos sequi inventore.
Fuga, architecto! Veritatis, fugiat incidunt? Accusantium consequuntur vel asperiores tenetur, officiis ipsa assumenda hic itaque quos ex fugiat quasi voluptate corporis temporibus aliquid! Fugiat cupiditate repudiandae illum a consequatur exercitationem.
Doloribus id necessitatibus porro nihil autem voluptates iure sequi tempora pariatur ullam inventore placeat consequatur reiciendis magni corporis, dolore obcaecati distinctio eos error! Repellendus recusandae quis maxime voluptatum eaque mollitia!
Nobis aspernatur doloribus eligendi eum autem commodi, sunt beatae earum molestias numquam possimus illum debitis et vero a, reiciendis impedit, aut labore quidem. Dicta sit praesentium illum veniam tempora eius!
Nesciunt modi itaque laborum rem vitae maiores voluptatum, incidunt expedita hic suscipit magni consequuntur ducimus molestias pariatur, temporibus qui dolor dignissimos? Et rem adipisci quibusdam suscipit vero enim mollitia sunt?
Vero magni veniam, cumque cupiditate quaerat est, quod minima illum totam eveniet aliquid dolor, porro eligendi. Deserunt, rerum sequi. Veritatis quam incidunt alias, qui ipsa cumque odio sit architecto repudiandae!
Vitae suscipit quas ratione nesciunt nemo ipsum ad labore quisquam, provident odit et! Dolorem minima magni provident delectus distinctio possimus minus sequi molestias est, neque eius libero voluptatum, consequuntur animi!
Temporibus ipsam neque earum itaque nemo ab nobis ut voluptatem ex nesciunt accusantium numquam iure quidem impedit dolorum, alias, fugiat, ipsa aliquam tenetur consectetur magnam voluptates suscipit. Possimus, placeat animi?
Enim ratione facilis at optio dicta aliquam eligendi velit asperiores saepe, itaque, provident quia qui accusamus et totam voluptate consequuntur odio illum explicabo vel? Eaque voluptate eum tempore dolorum voluptatem?
Cum voluptate ipsum quia voluptatibus voluptatum iure quisquam architecto facilis, ut corporis illo natus ab tempore quasi sunt officia exercitationem nihil. Pariatur natus doloremque iste sequi aliquam voluptas nobis deleniti.
Tempore, magnam perspiciatis illo ut ullam vel maiores ab eum cum! Non rem quidem animi assumenda iste nesciunt. Fuga aliquid dicta temporibus distinctio officiis aliquam quis repellat optio nobis ullam.
Expedita, sunt delectus modi obcaecati consequatur vel molestiae at provident eum blanditiis doloribus hic est nihil fuga? Nobis non aspernatur nam optio? Ipsum aperiam velit qui voluptatibus quis nisi officia!
Eaque id beatae nam, nulla dolores illum eligendi excepturi minus ducimus, soluta accusantium reprehenderit impedit! Earum, dolorum quia repellendus animi voluptate accusantium. Fugit ut magnam et rem, rerum possimus quisquam!
Accusamus illo nostrum sit delectus mollitia voluptates reprehenderit vitae magnam fugiat eveniet soluta, placeat pariatur provident! Ad, inventore vero cupiditate laudantium iste porro praesentium voluptate ratione excepturi voluptas laboriosam nostrum.
Sunt culpa a dolore accusamus facere quos vero ea corrupti! Architecto deserunt delectus fuga, velit facilis error. Commodi consequatur ea quibusdam, et dicta illo. Et explicabo ipsam nemo libero quae!
Quidem asperiores doloremque ipsa nihil mollitia. Earum, atque nemo nulla officia iusto, hic nisi totam sed magni blanditiis numquam delectus corporis fugiat autem ipsam perferendis nesciunt sint enim expedita ratione?
Esse hic, cupiditate maiores iste doloribus beatae officia corporis? Quae repellat iusto voluptatum! Dolorem aliquid officiis consectetur amet totam ad nam obcaecati ratione, rerum at animi, dicta id culpa nobis?
Culpa dolorum deleniti consequatur minus facere quia a nesciunt reprehenderit eos doloribus tempore ex reiciendis aut assumenda voluptatibus nobis, quibusdam, necessitatibus iure accusantium vero sint. Dolore atque non aliquam quia.
Quo animi quos temporibus tempora. Voluptatibus, maxime quos consequatur aspernatur in perspiciatis esse at accusamus ducimus. Asperiores laboriosam temporibus delectus modi neque voluptatem at rem? Debitis dolor sequi impedit alias.
Magni ipsum suscipit numquam soluta accusamus saepe vitae similique delectus corrupti id at est eos mollitia perferendis libero, harum vel? Quia, rem doloribus vel optio ullam molestias quam? Beatae, maxime.
Excepturi nobis dicta voluptas aperiam, mollitia porro, ad, beatae quibusdam temporibus architecto repudiandae nemo illo id tempore recusandae dolorum iure! Molestias eum ipsam dolore laboriosam maxime doloremque praesentium enim labore.
Aut id fuga eveniet, dolore modi eum esse ipsam beatae nesciunt! Accusantium, eos facilis omnis natus quis non, numquam cumque consequuntur nisi saepe repudiandae! Quae unde error cupiditate illo. Molestias.
Non voluptates odit consectetur modi qui eos magnam neque, eligendi eaque vitae ipsum excepturi accusantium et fugiat laboriosam delectus totam. Laudantium ratione aspernatur voluptatibus. Laboriosam ea doloribus voluptate earum reprehenderit.
Soluta illum necessitatibus sed optio recusandae quia, ea ipsum laborum nihil minus, debitis praesentium. Dolores quidem modi aperiam ducimus fugiat sunt suscipit, iure, aliquid dicta facere autem minus dolore magnam?
Laborum, tempora ex inventore ullam repellendus nobis accusamus quisquam magni fugiat praesentium! Qui, culpa placeat? Error ab tempore, dolores provident quia, et magni quo, culpa illum voluptatem quisquam molestiae impedit?
Alias, commodi error? Sint sequi rem quos nobis cumque magnam temporibus molestiae eveniet cupiditate inventore, optio alias recusandae consectetur voluptate nesciunt in nihil quibusdam earum distinctio non quo, dignissimos iste.
Omnis quos qui quam eaque deserunt, voluptatum facilis? Ipsa ea sunt, quidem labore in repudiandae libero iure, at quam voluptates nemo earum maiores repellat quae exercitationem architecto cum expedita eum?
Cupiditate explicabo perspiciatis recusandae aspernatur iure? Cumque veniam sapiente ipsum dolor magnam exercitationem quos voluptatem mollitia iure, vero omnis, error, saepe perspiciatis esse architecto amet officia unde totam assumenda hic.
Iure commodi dolorum quod officiis repellendus dolores quia libero, obcaecati rerum repellat minus quam cupiditate. Sint deserunt voluptatem consectetur necessitatibus enim velit culpa neque earum qui obcaecati, laudantium sequi accusamus?
Eaque corrupti saepe sint quasi aliquid accusamus repudiandae magni modi voluptates mollitia. Cumque ducimus, quis consequuntur cum molestias culpa! Inventore, iure officia? Quasi, iure? Quia quos libero perferendis reprehenderit incidunt.
Omnis consectetur porro delectus dolorum provident est eius corrupti vero sequi, dolores optio quaerat ullam repellendus repellat. Voluptatum, voluptates accusamus. In quisquam quam nam odio ratione, sed ducimus aliquam ut.
Voluptatibus nisi id ullam nesciunt omnis nihil, iste voluptas, odio voluptatem nulla totam voluptate molestiae dicta eveniet, autem recusandae cumque. Harum magnam fuga, expedita voluptatibus quidem fugit asperiores obcaecati ipsam!
Temporibus, commodi sed natus ipsum voluptatum at. Ea itaque atque porro vero! Saepe quas vitae repellendus, voluptate, omnis officiis odit velit quae quasi eos nisi consequatur mollitia modi aliquam aliquid.
Amet deleniti, culpa ut voluptas sed reprehenderit architecto quae enim iure excepturi. Perspiciatis pariatur obcaecati ad totam libero officia ea soluta omnis nisi at. Modi quidem atque quo reprehenderit maiores?
Est nam molestiae ex dolorem molestias sint debitis, cupiditate sapiente iste iusto voluptate eum possimus, assumenda dolor reiciendis delectus at, unde temporibus odit obcaecati. Adipisci temporibus debitis corporis exercitationem esse!
Laborum libero dolores culpa ut quam fuga blanditiis dolorum mollitia enim? Quasi sit, est maiores harum quis incidunt odit magni autem qui consectetur ea adipisci expedita laboriosam neque? Illum, sequi.
Perspiciatis deserunt doloribus ad incidunt beatae sunt et numquam dolorem asperiores nemo iure mollitia obcaecati vero enim molestias blanditiis labore facilis sapiente, omnis in minima explicabo impedit id sit. Quam!
Accusantium nobis cumque, temporibus ut possimus libero mollitia sequi deleniti dolorum adipisci laudantium qui delectus officiis labore cum ipsam tenetur placeat et ex eveniet sint deserunt. Beatae officiis ratione dolore?
Amet, fuga aspernatur neque saepe error totam eius velit ab quasi, quisquam debitis praesentium assumenda repellendus. Eius, et voluptates iusto fuga tempora delectus inventore ipsam eveniet ratione accusamus. Laudantium, iure.
Sunt animi aperiam ex voluptas, consequatur odio. Nisi, nulla distinctio. Suscipit fugit similique soluta at asperiores, ad enim, quis explicabo veniam natus impedit et labore odit repellat. Debitis, tempore explicabo.
Unde excepturi commodi in dolores iusto tenetur, voluptas eius repellendus reprehenderit velit? Suscipit delectus recusandae sed. Cumque voluptatum labore nam possimus? Inventore doloribus officiis omnis sunt culpa! Voluptates, quis suscipit!
Ipsam, explicabo voluptatibus vero eos, quae repellat eius incidunt voluptatum, nihil porro saepe libero totam! Delectus obcaecati hic quam consectetur porro, corporis at odio, aliquid suscipit neque, omnis voluptatibus voluptatum!
Quo, eveniet dicta sapiente sequi consectetur quia qui tempora cumque molestias at rem facilis necessitatibus ab autem iusto delectus hic totam officiis explicabo nisi libero, beatae fugit. Assumenda, et autem.
Molestiae nostrum rerum maxime nisi beatae debitis nulla reiciendis quasi, distinctio ipsa, nobis aspernatur et qui unde illum consectetur incidunt quos sit iure temporibus earum expedita. Minus suscipit tempore officia?
Adipisci qui eveniet quasi esse nesciunt quod nostrum recusandae beatae sapiente cupiditate repellat eius, molestias labore eum dolor laborum voluptate ea fugiat, quibusdam deleniti voluptates. Aperiam dignissimos facere sed quia.
Nihil delectus hic vel inventore, enim libero ducimus odit non tempora esse veritatis. Minus pariatur dolore deleniti. Accusantium molestias harum aliquid eaque aliquam fugit magnam! Error fuga voluptatem quibusdam? Velit.
Accusamus commodi quos, iste maiores laboriosam vel eligendi ullam ea nisi, quis aut inventore, veritatis placeat accusantium. Veniam adipisci esse commodi accusantium consequatur corrupti soluta! Veritatis recusandae id in accusamus.
Provident exercitationem optio, est aliquid, quam id fuga velit, laboriosam perspiciatis natus iure hic? Enim ipsam itaque a ipsa, perferendis, et, voluptate inventore atque assumenda vero consequuntur fugit in provident!
Animi ab error illo corrupti vero aliquam voluptatem corporis modi consectetur odit perspiciatis est perferendis, nemo dolore? Ipsa, iusto veniam. Totam odio laudantium obcaecati accusantium, facere ipsa delectus hic harum.
Eveniet animi iure alias cupiditate optio obcaecati modi impedit iusto debitis est. Libero eum consectetur, aliquam officiis nesciunt repellendus ipsum non ea! Odit impedit quidem commodi delectus, corrupti vitae assumenda?
Repudiandae, repellat impedit vitae veniam nesciunt explicabo corporis dolorem itaque aperiam totam voluptates laboriosam tempora corrupti, consequuntur numquam temporibus perferendis sed, iusto nobis quod? Sapiente dolorum voluptatibus id repellat possimus.
Adipisci ullam amet ut! Dolore commodi quasi itaque culpa, a quas fuga ducimus vero, ipsum facilis suscipit deleniti nulla, aliquam unde. Tempora fugit explicabo vel sit! Dicta voluptatibus modi deserunt!
Quis ut, delectus natus magnam quod magni, aliquid voluptatum sit eius sapiente quaerat impedit officia ab atque minima libero dolorum ratione repudiandae debitis doloremque! Placeat dignissimos praesentium pariatur a blanditiis.
Nesciunt perferendis voluptates ducimus quaerat reiciendis sit earum rerum deserunt molestiae, repellendus deleniti nulla dolorum recusandae provident nobis reprehenderit repellat voluptate eius! Natus ea dignissimos officia reprehenderit, corrupti voluptatem a.
Veritatis soluta placeat totam minus tempore fugiat, quas iure sed minima dolorum incidunt voluptas nulla, illo, distinctio repudiandae adipisci! Odit dolor laborum delectus iure saepe, numquam et blanditiis maiores facilis!
Illo accusantium minima, rerum optio temporibus autem quibusdam, repellendus quos fugit aspernatur iure maxime omnis eveniet deleniti. Officiis temporibus dignissimos totam corrupti ad! Harum illum atque corrupti aspernatur aperiam culpa!
Fuga, quam commodi minus perspiciatis repellat doloribus corrupti et saepe necessitatibus cumque esse, deleniti sunt. Fugit corrupti distinctio quaerat vel natus reprehenderit sapiente dolor doloribus consequatur accusantium, eius facilis modi!
Dolores reprehenderit corrupti veniam praesentium quasi dolorum, eum ad tempore voluptatum ex iste excepturi provident, ut perspiciatis quo aspernatur asperiores quisquam eveniet rem. Exercitationem odio incidunt maxime atque ut alias?
Eos, cupiditate. Earum voluptatem suscipit provident qui, quam labore dolorem odio, minus eveniet numquam commodi harum ratione esse sequi explicabo temporibus unde adipisci aspernatur vitae aliquam quasi veritatis repudiandae fugit.
Nesciunt consectetur eveniet debitis quia perferendis similique possimus iure consequatur eius fugit ipsum cumque ut molestiae, iusto vitae vero. Velit nobis dignissimos, aspernatur accusamus saepe quis! Ipsa nihil quis repudiandae!
Dolorem debitis iusto, ipsum aspernatur illum aperiam quo laboriosam porro dicta accusantium molestiae iste dolor eum omnis consectetur commodi repellendus labore eveniet incidunt accusamus? Culpa delectus sunt laboriosam. Ut, delectus!
Adipisci dolor expedita, velit voluptatibus sit nobis quaerat similique? Quo esse porro, quam id perferendis illum soluta repellendus sint corporis! Quas nam modi ex excepturi quo dolor illum a eum!
Ducimus perferendis placeat fugiat qui molestias! Tempora numquam nostrum voluptate officiis, fugiat exercitationem tenetur delectus tempore mollitia officia enim iusto ut sunt praesentium quasi. Delectus soluta repudiandae officiis doloremque molestias.
Dolorum enim consequatur, laudantium similique ipsum, accusamus quam unde error, quaerat tenetur dolores. Facilis hic illo nulla iusto architecto laudantium obcaecati sunt, ad adipisci autem cupiditate culpa veniam, maxime ex?
Qui ipsam tenetur enim iste minus quos magni autem earum iusto maxime similique dolorem iure nihil, vero, obcaecati atque dolor recusandae hic facilis animi! Ab eaque cum iure soluta inventore?
Modi ratione iste atque cum itaque adipisci, rem consequuntur illum similique, odio delectus, minus quos facere quibusdam. Quia, iusto maxime? Molestiae eaque consectetur quod mollitia expedita ipsum enim eius quas!
Deleniti culpa asperiores rem assumenda unde. Beatae officiis autem nulla vero. Tempora sed quaerat vero sapiente assumenda, cumque ducimus ipsa amet et saepe culpa ipsam a nesciunt animi facere. Amet?
Quod voluptatum voluptatibus rem, adipisci molestiae ipsa amet ex? Voluptates molestiae voluptatem atque nemo sequi rem animi unde ratione in incidunt corrupti perspiciatis, dolorem fuga aspernatur error eos officiis consectetur.
Quibusdam dolorum deserunt debitis possimus ipsam rem beatae harum labore impedit recusandae ratione corrupti dolor, molestiae culpa voluptatum ullam accusantium nam. Ratione, tempore aut dolorem quo delectus error quos ex?
Inventore cumque magnam necessitatibus numquam eaque quasi quis, amet eius modi unde aliquid voluptate voluptatibus dicta neque a accusamus non enim dolore ab fugiat dolores molestias voluptatem? Obcaecati, doloremque assumenda?
Est omnis saepe velit nihil cumque? Unde dignissimos est velit, iure, recusandae totam illo autem fugit labore similique officia dolorum earum libero veritatis sequi eum reprehenderit iusto! Fuga, commodi quibusdam!
Iusto, ullam! Excepturi et sunt mollitia nobis dolorem quam consequuntur inventore eos, possimus assumenda molestias ea veritatis nostrum, ullam magni earum? Corrupti exercitationem nesciunt saepe in vitae ab est! Eius!
Quidem cumque perferendis fuga iusto saepe. Ab beatae error id, asperiores ducimus ad nisi dolorem voluptatum eum voluptate ut incidunt architecto amet consequatur optio nesciunt autem aliquid et nostrum doloremque?
Minima eveniet culpa dolores. Rem temporibus sint qui, optio ipsa velit exercitationem quam at aperiam nemo impedit natus fuga non expedita distinctio voluptatum iure architecto asperiores quas laboriosam eveniet molestias.
Quaerat numquam pariatur harum repellendus vitae velit debitis, consectetur voluptatibus saepe obcaecati, deleniti cupiditate nemo quidem fugit. Molestiae earum quidem saepe natus unde nam quod nostrum, veritatis, nesciunt, maiores similique.
Eos et cum tempore? Et deleniti eum quisquam sapiente ipsam nisi id! A odit, labore ipsa perferendis error repudiandae velit repellendus tenetur eligendi fuga sapiente nisi doloremque cum. Vitae, reprehenderit.
Quas quisquam, aperiam delectus commodi in fugit distinctio autem harum. Saepe deleniti exercitationem minus error impedit obcaecati ducimus fugit corporis, autem sunt, excepturi voluptatum magni quas quam, officiis totam alias.
Repellendus consequuntur itaque dignissimos laboriosam, modi porro impedit ipsa atque. Laudantium aliquid provident, pariatur ducimus veritatis voluptas? Numquam deleniti doloremque dignissimos atque laborum tempora labore cupiditate temporibus beatae. Consequuntur, dolor!
Laboriosam aliquid quo quidem impedit optio sed dicta, voluptas soluta itaque! Libero excepturi reiciendis, iure repudiandae totam, dolorum aliquam debitis ipsam enim aspernatur, incidunt ut alias error repellat! Cumque, debitis!
</p>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
The css:-
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
::-webkit-scrollbar
{
width: 0;
}
section
{
padding: 100px;
background: #000;
font-family: arial , sans-serif;
}
h2
{
color: #fff;
font-family: 'Roboto', sans-serif;
font-weight: 900;
font-size: 3.5rem;
margin-bottom: 10px;
text-align: center;
}
p
{
color: #fff;
font-size: 1.6em;
}
#pregressBar
{
position: fixed;
/* height: 100%; */
top: 0;
right: 0;
width: 15px;
border-radius: 0px 0px 5px 5px;;
background: linear-gradient(to top,#00f83e,#3cf54b,#92ff67);
}
The js
$(window).scroll(function () {
var scrollbar=$(window).scrollTop();
let dh=$(document).height();
let wh=$(window).height();
let scrollparcent=(scrollbar/(dh-wh))*100;
$("#pregressBar").css("height",scrollparcent+"%");
});
Do you like it ?
want to view the live demo ??
here you go :- https://freakflames29.github.io/scrollbar-animation/index.html
Top comments (0)