1
I have already used the following section on the page
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.5);
border-radius: 4px;
}
but this works only on some browsers as the documentation describes, would like to change from Edge and Possible?
3
Let’s take it slow because soon the Edge will be almost a Chrome and will even benefit from properties -webkit-
In fact you have two options and the first is to leave your CSS as it is, because Edge is going through a process of migration of the rendering engine. Microsoft itself has made it clear that it is migrating Edge to Chromium, the same engine as Chrome. This is already widely publicized and confirmed by MS.
So leave your CSS as it is, because it might work in the next Edge updates. It will work as a Fallback.
There is a plethora of news and discussions about this change on the Internet. If you are interested do a search to see more details and pros and cons.
Workaround and Crossbrowser
If you want a more cross browser version based on Javascript has this jQuery plugin that is very cool and works very well, calls Nicescroll https://nicescroll.areaaperta.com/
Look there running on the Edge
Follow an example code, but read the documentation to learn more about how to use it. This is the project on Github if you’re interested https://github.com/inuyaksa/jquery.nicescroll
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery NiceScroll Test Page</title>
<style type="text/css">
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.8/jquery.nicescroll.min.js"></script>
<script>
$(document).ready(function() {
$("body").niceScroll({
cursorcolor:"aquamarine",
cursorwidth:"16px"
});
});
</script>
<meta name="viewport" content="user-scalable=no" />
</head>
<body>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa nihil voluptatem ratione officia iusto quis. Consequatur nostrum atque delectus vitae sunt cumque. Voluptates, nemo molestiae doloribus quas quisquam culpa autem accusantium, distinctio excepturi neque quae ratione, consectetur exercitationem. Exercitationem vitae quas, quae tempora ea error quibusdam ipsam quos ad, odio esse corporis laboriosam, eos quia at? Et numquam, rerum laborum, labore facere vero cumque molestiae nemo officiis a quia repellendus sed nam? Assumenda, hic quod velit nulla doloremque aperiam quasi cum iste reiciendis ipsum dolores accusantium et architecto commodi eos impedit, ipsa, eaque excepturi voluptatem nostrum tempore ea! Optio doloremque mollitia, modi id fugit consequuntur iste natus nam voluptatem pariatur cum animi voluptas ipsam? Nostrum eaque earum ipsa maiores temporibus labore vel quisquam, dolorum inventore a repellendus sint aut, neque doloremque voluptatem placeat, soluta quasi perferendis exercitationem. Repellat quis ut nemo saepe optio voluptate earum vitae tempore ipsam tempora omnis, soluta distinctio aspernatur veniam aliquid molestiae mollitia molestias! Sunt officiis in blanditiis vel, dolorem qui ipsam beatae veritatis alias, fugit inventore nulla possimus eius praesentium ad tenetur! Illo unde cumque laborum, repellendus recusandae temporibus inventore debitis quis hic obcaecati quos est accusantium, aspernatur labore tempore consequuntur deserunt pariatur laboriosam ratione at quam, modi possimus. Perspiciatis pariatur molestias aliquam laudantium, dolor eligendi debitis, esse explicabo voluptatem nam autem, impedit excepturi aspernatur! Quod, voluptatibus iste enim corporis, quos tempore maiores necessitatibus quam, deleniti animi fugiat. Molestiae eius natus quisquam quia similique doloremque ab odit ut omnis quo at laborum quod eveniet ipsa delectus minima iure laboriosam ratione, ea necessitatibus, saepe, blanditiis totam. Aspernatur obcaecati minus autem? Tenetur tempora nihil assumenda omnis velit amet sit optio, consectetur, perspiciatis architecto aspernatur repellendus illum laboriosam quos suscipit sapiente nemo ipsa animi facilis quia voluptates tempore. Maiores neque excepturi recusandae aliquid eius culpa, officia cupiditate tempora molestiae laborum nulla earum doloribus placeat molestias explicabo consequatur vero quasi incidunt autem quod unde tenetur exercitationem. Dignissimos soluta facilis veritatis necessitatibus ratione labore. Excepturi assumenda voluptas soluta non voluptates ullam autem beatae hic eius delectus veritatis ipsa vel, minima numquam commodi, natus id fugiat eligendi mollitia aut! Sequi praesentium aliquid expedita, voluptatum neque rerum incidunt ad dignissimos asperiores. Commodi enim ratione cum id ex vel expedita officiis laborum nesciunt provident ipsa minima sunt sit deserunt cumque architecto nulla quisquam animi nostrum, asperiores nisi mollitia. Expedita, corrupti odio magni quis consectetur numquam porro laudantium mollitia rem sed. Ipsum nesciunt esse temporibus necessitatibus nihil praesentium dolorum perspiciatis consectetur minus itaque. Laboriosam nesciunt optio amet veniam exercitationem, quos magnam minus cumque aspernatur voluptas odio dolore autem facere cupiditate eligendi blanditiis suscipit qui dolores neque velit culpa, aliquid itaque sunt. Ex nemo quibusdam unde porro vero iusto minima doloremque nam rerum, laudantium, est magni deleniti similique quasi sed! Dolore, enim iusto! Quasi ipsa, sed deleniti natus illo magnam! Facilis, sequi veritatis. Architecto illo odio perspiciatis similique porro culpa dolorem autem exercitationem. Voluptatibus laboriosam vero libero, magnam molestiae dolorum natus consequuntur sapiente repellendus aliquid perferendis fuga. Laborum numquam consequuntur modi ipsam? Quibusdam in repudiandae eveniet aliquid a voluptatum, neque delectus blanditiis velit, ad hic. Nesciunt ipsa voluptatibus suscipit atque, asperiores perferendis, ipsam dolorem temporibus quod libero praesentium ducimus cumque eius deserunt magnam labore deleniti fugit recusandae corrupti, eaque repellendus quisquam! Pariatur quia ea adipisci, earum tenetur doloribus laborum optio commodi quidem excepturi perspiciatis veritatis officiis at eius accusantium totam consequatur expedita ullam esse cupiditate quis facilis. Est eligendi sequi dolor nemo debitis voluptatum expedita commodi nihil! Repudiandae obcaecati eaque tempore recusandae autem voluptas veritatis laborum illum. Pariatur harum ab quibusdam, delectus cum autem. Ipsum iste excepturi enim cumque quisquam quis, atque officiis. Magni dolores sapiente repudiandae quo, sed facilis distinctio qui mollitia maiores repellat blanditiis impedit, cum voluptates expedita nostrum labore eius tempore officia, quam eos? Placeat amet cupiditate quod voluptatem omnis doloribus, animi illo sapiente fugit iusto consequatur, ipsum sed sit excepturi veniam asperiores ipsam expedita nulla ut in quasi dicta odit corrupti. Modi tenetur aliquam assumenda totam deserunt, quasi minus dignissimos quod sapiente quae eaque? Animi corporis laudantium praesentium, doloribus at illo possimus architecto ullam, soluta labore debitis consectetur inventore adipisci quia? Nostrum ab impedit excepturi in a beatae doloremque illo eaque atque id aperiam consequuntur optio error earum provident laudantium ad dolorum, accusamus dolor reprehenderit tenetur sint debitis? Autem, in, officia enim tempore pariatur ex officiis aspernatur ipsa assumenda eaque illum ullam dolor cum corrupti saepe nam doloribus facilis eum unde iste cumque aliquam corporis. Eos dolor reprehenderit similique eum accusamus architecto quas recusandae at doloribus magni, voluptatem ut non quia. Beatae commodi odio ut soluta excepturi. Adipisci, eveniet dolorum! Quae incidunt doloribus sequi odit mollitia rem nihil architecto quis quia! Eos quam quasi doloribus expedita blanditiis, ipsum neque minus facere, numquam consectetur rem temporibus beatae libero. Enim, placeat quos molestias dolorum fuga iusto eveniet dicta ad sunt eligendi recusandae architecto eius quod, nam repudiandae beatae, iure minus ipsam pariatur! Libero maiores debitis facilis laboriosam? Ad quae officia obcaecati tempora dolore cupiditate ipsum recusandae voluptate voluptatibus cum? Necessitatibus id dicta, quo molestiae, dignissimos officiis hic, corporis sunt ipsa nihil nulla sed possimus exercitationem incidunt libero odit! Ducimus labore accusantium dolorem magni possimus porro asperiores recusandae hic deleniti quisquam, atque distinctio ab totam! Voluptatibus hic soluta perspiciatis ad commodi neque exercitationem voluptas temporibus. Suscipit voluptas, commodi quas libero blanditiis quae! Quam id maiores culpa quasi expedita magni odio, fugit maxime, tempora atque eveniet voluptatibus et ut possimus voluptatem cumque praesentium temporibus, rem excepturi at veritatis sequi consequuntur? Quod voluptates ipsam minima. Laborum porro neque enim voluptatibus impedit a tenetur eveniet nulla iusto beatae dolores molestias, quaerat nisi atque sed, officiis, soluta consectetur? Illum amet, dicta laborum in ex iste quisquam porro voluptatum quasi beatae debitis itaque nesciunt perspiciatis accusantium dolore nostrum nihil maiores modi nemo, reprehenderit pariatur quaerat fugit sit! Voluptate, obcaecati dolores illo eaque eius maiores quisquam libero voluptatum saepe sunt quam dolorum eos ipsam, quibusdam minima sit corrupti. Modi inventore quos commodi sequi officia illo quod. Vero dicta veritatis laborum aliquid, saepe facilis iusto, corrupti a vel officiis iste nihil. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus modi explicabo voluptates recusandae esse? Magni autem rem neque sed tempora, commodi tenetur doloremque earum ea cumque exercitationem aspernatur totam quidem harum reprehenderit iste. Voluptates commodi quam necessitatibus numquam odit, nam voluptatum delectus laudantium culpa ea a dolorum, explicabo voluptatibus in quibusdam vero distinctio dolores ut sit accusamus illo ad adipisci quasi? Neque, libero deleniti atque aliquam perspiciatis eum voluptas expedita aut ex eius non explicabo laudantium exercitationem odio? Perspiciatis facilis, amet harum id ab possimus sequi nisi ipsum mollitia officia ex nihil officiis dolor, fugiat exercitationem odit nulla cupiditate ipsa libero aspernatur et assumenda iure. Quidem in mollitia accusamus ipsum laboriosam praesentium optio, ipsa tempore amet aut libero corporis dignissimos neque at ab ad molestias cumque fuga repellat necessitatibus tempora temporibus eaque officia commodi! Aliquam officia assumenda nobis reprehenderit error eos vitae! Tempore eaque culpa velit ullam at dolor error ex consectetur quae, vitae eos est sit excepturi doloremque, placeat facilis repellat voluptatem voluptate eligendi possimus consequatur explicabo rem enim. Accusantium dicta odio maiores nihil autem! Doloremque blanditiis laborum sunt illum reiciendis corporis! Magnam repellendus fugit hic optio repudiandae suscipit eum sequi in! Omnis animi optio quam, delectus, cumque magnam fuga placeat, dolorum hic rem molestias. Natus minus, laborum dolor vero itaque autem omnis, ex quae eveniet repellendus, voluptate maxime esse numquam? Rem, nulla. Nobis soluta delectus magnam beatae nulla asperiores fuga tempore unde perspiciatis? Vero fuga tenetur tempora neque totam unde voluptas eum rem, aliquid pariatur odit omnis, nihil sint nam harum veritatis quasi illo. Nesciunt reiciendis voluptas cumque aperiam totam maxime excepturi illum, corrupti tenetur harum quasi eaque beatae atque possimus consectetur nemo quis tempore recusandae enim cupiditate nobis nisi laudantium, ab natus! Blanditiis nam quos doloribus voluptatum quo esse omnis, assumenda voluptatem quidem dolorem reiciendis sint! Numquam?
</body>
</html>1
For now it’s impossible to do this in the Edge, as documented by the Mozilla developer community.
Anything beyond that with just a whim.
Browser other questions tagged html css
You are not signed in. Login or sign up in order to post.