Currently, I have a scrollbar displaying over part of the page when there is a need for it.
I would like to apply styling to the scrollbar such that it doesn't look so bright and I can have the background area of the scrollbar to be transparent. Hence, I tried to apply styling to it. But the scrollbar still seems to be the same. To test if the styling is working, I gave some styles to the scroll based on this article:
https://css-tricks.com/almanac/properties/s/scrollbar/
body::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
body::-webkit-scrollbar-thumb {
background-color: red;
outline: 1px solid slategrey;
}
But nothing seems to change.
Don't even see those style attributes in developer tools.
Is it not possible to apply custom styling to the browser scrollbar ? Also, can I give scrollbar styling to a div element ? or It has to be at the root/body level?
This gives a transparent background on Firefox, Chrome, Edge and Safari.
Edit: It seems that height is needed under ::webkit-scrollbar in order for it to work on chrome using MacOS.
body {
margin: 0;
background: grey;
height: 500px;
overflow: overlay;
}
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: green transparent;
}
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
height: 10px;
width: 16px;
}
*::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0);
}
*::-webkit-scrollbar-thumb {
background-color: green;
border-radius: 10px;
border: 3px solid #ffffff;
}
<body/>
Try to also add a ::-webkit-scrollbar, like this
body::-webkit-scrollbar {
width: 12px;
}
Looks like you also need to add the ::-webkit-scrollbar to make styles work, I do not know the reason for this, and have not found an explanation. But the ::-webkit-scrollbar represent the whole scrollbar. An example:
body {
width: 300px;
height: 400px;
}
body::-webkit-scrollbar {
width: 12px;
}
body::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
body::-webkit-scrollbar-thumb {
background-color: red;
outline: 1px solid slategrey;
}
<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In euismod auctor nulla, et fermentum nisi gravida quis. Phasellus molestie velit felis, nec vestibulum dolor tristique non. Mauris luctus nunc ultricies lacus tristique, at bibendum magna ullamcorper. Phasellus lobortis ut quam vel lacinia. Vestibulum euismod magna eu lacus semper lacinia. Phasellus id neque vel metus vehicula varius quis pellentesque massa. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut fermentum ex nisi, nec iaculis quam efficitur in. Vivamus pharetra nec velit id placerat.
In id pretium dolor. Nulla facilisi. Sed in faucibus purus, quis convallis lacus. Duis nisl lectus, euismod sagittis euismod ac, tempus quis tortor. In ut dui diam. Integer laoreet metus sed arcu interdum, vitae sagittis magna tristique. Morbi fermentum velit non lectus viverra iaculis. Curabitur ac nulla congue, vehicula quam id, congue tortor. Maecenas porta bibendum mauris, blandit aliquet massa rhoncus in.
Morbi aliquet nunc non dolor consectetur lacinia. Maecenas eu viverra magna. Sed consectetur gravida urna. Aenean eu vehicula mi. Duis a ex tristique lorem mattis molestie. Phasellus eget dolor ex. Nullam congue tortor in lorem lacinia, sit amet condimentum arcu facilisis. Nam quis felis placerat, rhoncus nulla non, accumsan justo. Morbi id placerat nunc. Aenean eleifend nec lacus vitae sodales. Vestibulum eu urna eu elit rhoncus dapibus non vitae ex. Vivamus eget cursus nibh. Vestibulum cursus ipsum diam, vel aliquet leo laoreet eu. Integer hendrerit, purus sed gravida euismod, metus odio aliquam purus, in semper orci urna a ex. Morbi dignissim finibus nisi sed aliquet.
Suspendisse in lectus nec orci tincidunt mattis. Morbi mollis nec nibh a dignissim. Vestibulum mi elit, dictum et posuere id, pharetra consectetur tortor. Suspendisse potenti. Sed suscipit interdum tellus, et gravida ipsum mattis sit amet. Maecenas fermentum non quam eu sollicitudin. Vestibulum sodales mauris ac ipsum fermentum vulputate. Nulla pharetra mattis gravida. Aenean at magna turpis.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque dignissim ultricies quam, ac maximus tortor interdum vel. Quisque eget ultricies ligula. Duis urna augue, ornare ac euismod eu, maximus non augue. Cras eget mi sapien. Nulla tincidunt aliquam lacus in vulputate. Praesent vel feugiat dui. Phasellus tellus erat, malesuada et eleifend in, fringilla eu nisl. Maecenas hendrerit sem quam, congue fermentum arcu tincidunt vel.
</body>
Related
I've managed to customise the scrollbar of a list that works in Chrome, Safari and Edge, however in Firefox, the track still appears. It seems that Firefox doesn't support ::webkit-scrollbar so does anyone have any suggestions on how to make the track transparent/invisible?
Try this code.
.scrollbar {
width: 500px;
height: 150px;
overflow-y: scroll;
scrollbar-color: grey transparent;
scrollbar-width: thin;
}
.scrollbar::-webkit-scrollbar-track
{
box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: transparent;
}
.scrollbar::-webkit-scrollbar
{
width: 6px;
background-color: #F5F5F5;
}
.scrollbar::-webkit-scrollbar-thumb
{
border-radius: 10px;
box-shadow: inset 0 0 5px rgba(0,0,0,.3);
background-color: grey;
}
<div class="scrollbar">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum semper tortor at pellentesque. Suspendisse iaculis quis risus in sagittis. Vestibulum elementum pulvinar vulputate. Morbi rutrum nisl eget finibus efficitur. Donec sed pellentesque purus. Nam vel euismod quam. Quisque lobortis aliquet nibh nec placerat. Maecenas volutpat orci dolor, mollis elementum tortor efficitur malesuada.Ut elementum sagittis lorem, non tempus diam euismod eu. Nullam vel diam ornare, aliquet enim non, sodales nulla. Pellentesque molestie, felis id pellentesque mattis, purus metus ultrices ipsum, vitae tristique nunc ante a odio. Quisque malesuada, felis sed tempor feugiat, est ante hendrerit sem, a porta elit metus ac est. Nullam sed felis leo. Donec ac vehicula dolor. Duis vel lacus volutpat, congue leo et, congue ex. Nullam rhoncus orci ut odio rutrum, id hendrerit elit malesuada. Curabitur orci neque, mollis ut aliquam a, dictum vitae massa. Donec efficitur ornare varius. Aliquam vulputate pharetra tortor nec finibus.
</div>
I've tried using the CSS backdrop-filter: blur combined with the box-shadow property but the final result doesn't seem to be rendered properly in Safari.
I'm using macOS 10.15 Catalina and Safari 13.0.2 and I've also noticed that the same code snippet renders fine in Chrome.
Unfortunately the ::before and ::after solution that a user posted here cannot be applied to input fields or to elements containg text inside.
If you're using Safari you can understand better what I'm talking about by looking at my webisite in which I've first faced this issue: https://cristiandavideconte.github.io/myPersonalWebPage/
I'll leave a portion of code that you can use to reproduce this issue:
body {
display:flex;
justify-content:center;
background-image: url("https://wallup.net/wp-content/uploads/2014/10/nature/Sunset_Mountain_And_Lake_Free_Download.jpg");
background-repeat: no-repeat;
background-size: 100% 200%;
}
p {
color: white;
margin:0;
font-size:190%;
}
#presentationCard {
height:60vmin;
width:55vmin;
-webkit-box-shadow:0 0 0.5rem 0 rgba(0,0,0,1);
box-shadow:0 0 0.5rem 0 rgba(0,0,0,1);
overflow-x:hidden;
overflow-y:scroll;
border-radius:5%;
background:rgba(0,0,0,0.3);
-webkit-backdrop-filter:blur(2rem) saturate(130%);
backdrop-filter:blur(2rem) saturate(130%);
-webkit-transform:translate3d(0, calc(50vh - 60vmin / 2), 0);
transform:translate3d(0, calc(50vh - 60vmin / 2), 0);
overscroll-behavior:none;
}
#presentationCard::-webkit-scrollbar {
display:none;
}
#presentationCard p {
margin:calc(0.25 * 17vmin);
backface-visibility:hidden;
}
<body>
<div id = "presentationCard">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat nunc lorem, quis commodo elit interdum vitae. Aliquam malesuada erat at dictum pretium. Donec pellentesque sed metus id commodo. Vivamus luctus erat non dui consequat, a tincidunt eros luctus. Vestibulum vel imperdiet risus, congue vehicula massa. Proin non iaculis nisl. Nam iaculis, libero ac accumsan bibendum, augue ante blandit mi, quis ullamcorper lacus metus eget risus. Duis in pretium sem.
Sed suscipit porttitor odio, ac auctor quam. Praesent gravida vulputate tortor id cursus. Nulla imperdiet luctus purus, vel suscipit ante lacinia vitae. Cras in quam dignissim, lacinia diam non, tristique purus. Curabitur sit amet risus a augue gravida accumsan ac vel massa. Nulla semper magna felis, ut malesuada ex semper quis. Suspendisse venenatis interdum turpis eget facilisis. Donec tincidunt, purus pharetra convallis volutpat, ante ex venenatis erat, et ultricies justo magna a tortor. Pellentesque commodo nisi mi, non lobortis velit cursus id. Praesent venenatis, tortor quis gravida gravida, tellus metus consectetur massa, non fermentum nisl massa nec nunc. Etiam sapien tortor, aliquam sed diam non, bibendum pellentesque neque. Curabitur facilisis sapien vel mollis viverra. Phasellus at aliquet eros. Curabitur suscipit, lorem in pellentesque consectetur, quam nulla hendrerit sem, quis congue odio elit vitae nulla. Sed viverra mauris eget elit elementum fringilla.
</p>
</div>
</body>
Comparison between Chrome (on the right) and Safari (on the left) rendering the code above
Zoomed version of Safari's rendering
It turned out to be a specific Safari 13.0 (MacOs Catalina and older versions) bug.
It has been solved with the BigSur update.
I've been trying to get this text underline transition to work: https://codepen.io/shshaw/pen/pdyJBW
a, .strike {
color: #FF5151;
text-decoration: none;
display: inline;
background-image: linear-gradient(to bottom, transparent 20%, currentColor 21%);
background-position: 0 1em;
background-repeat: no-repeat;
background-size: 0% 6px;
transition: background-size 0.5s ease-in-out 0.2s;
}
a:hover,
a:focus {
background-size: 100% 6px;
transition-delay: 0s;
}
.strike {
color: #307672;
background-size: 0% 2px;
background-position: 0 0.5em; /*1em;*/
}
.strike:hover,
.strike:focus {
background-size: 100% 2px;
transition-delay: 0s;
}
html {
background: #000249;
color: #FFF;
font-size: 62.5%;
display: flex;
height: 100%;
}
body {
font-size: 1.6rem;
line-height: 1.4;
max-width: 30em;
width: 90%;
margin: auto;
background: inherit;
-webkit-font-smoothing: antialiased;
font-smoothing: always;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a bibendum est. Mauris vehicula cursus risus id luctus. Curabitur accumsan venenatis nibh, non egestas ipsum vulputate ac. Vivamus consectetur dolor sit amet enim aliquet eu scelerisque ipsum hendrerit. Donec lobortis suscipit vestibulum. Nullam luctus pellentesque risus in ullamcorper. Nam neque nunc, mattis vitae ornare ut, feugiat a erat. Ut tempus iaculis augue vel pellentesque.</p>
<p>Vestibulum nunc massa, gravida quis porta nec, feugiat id metus. Strike me! Nunc ac arcu dolor, quis vestibulum leo. Cras viverra mollis ipsum, non rhoncus lectus aliquam et. Morbi faucibus purus sit amet lacus aliquet elementum. Donec sit amet posuere enim. Cras in eros id tortor fringilla ultricies. Mauris faucibus ullamcorper velit, pulvinar varius odio eleifend eu. Quisque id odio metus. Morbi adipiscing ultricies posuere. Pellentesque elementum porttitor eros in molestie. Maecenas ut leo quis nisi tempor tincidunt.</p>
<p>Donec nunc ligula, vulputate quis mollis eu, interdum quis libero. Donec nulla ante, facilisis sit amet vulputate at, tincidunt a velit. Maecenas vestibulum, nulla sed tincidunt viverra, lorem turpis aliquam urna, ut pretium orci purus consequat augue. Etiam a enim orci, vitae pulvinar odio. In elit urna, tincidunt a pellentesque et, scelerisque at nibh. Sed nec est sapien. Aliquam ullamcorper eros eu quam ultrices vel faucibus eros interdum. Etiam mattis eleifend sapien, eu iaculis massa feugiat sed. Aliquam erat volutpat. Vivamus facilisis ultricies eros, a pretium purus mollis id. Sed dapibus elit ut neque rutrum dignissim. Nulla eros nisl, venenatis quis rhoncus sit amet, molestie nec nisl. Pellentesque vel neque sapien, et sagittis nulla.</p>
<p>Aliquam eu iaculis mauris. Etiam arcu lectus, imperdiet sit amet volutpat vitae, commodo sed nibh. Fusce faucibus tempor cursus. Donec ut ligula tortor. Maecenas malesuada, diam vitae pharetra dictum, erat ante iaculis risus, sed sollicitudin nisl nisl vel metus. Nulla libero augue, convallis nec luctus id, iaculis nec urna. Cras vitae mi ut augue ultricies tempus.</p>
And I've got it working in all major browsers except IE11. I've seen this SO question (Background size animation not working in IE11 or Ipad) where the accepted answer says: "Internet Explorer 11's set of animatable CSS properties is the same like they've started in IE 10 with, and background-size is not among those animatable ones."
That answer also links here: https://www.w3schools.com/cssref/css_animatable.asp
Which lists the animatable properties, and lists background-size as one of those animatable properties, but when I try to run their example (https://www.w3schools.com/cssref/tryit.asp?filename=trycss_anim_background-size) in IE11, it doesn't work.
I can't seem to find any documentation that explicitly lists the animatable properties in IE11, so is background-size simply not animatable in IE11, and is there any documentation that says so?
I want to style a scrollbar with CSS, but I also want it to behave like OS X's native scrollbar (i.e. show only when scrolling, fade away when idle).
Is there a way to do that with pure CSS?
I don't think browsers let you have that much of control over the native UI with CSS only.
You would need to use JavaScript to manipulate scroll events. Luckily, you don't have to reinvent the wheel, consider the following plugin: http://enscrollplugin.com/
Uses jQuery
Control scrollbar appearance and fading with CSS
$('#scrollbox3').enscroll({
showOnHover: true,
verticalTrackClass: 'track3',
verticalHandleClass: 'handle3'
});
#scrollbox3 {
overflow: auto;
width: 400px;
height: 360px;
padding: 0 5px;
border: 1px solid #b7b7b7;
}
.track3 {
width: 10px;
background: rgba(0, 0, 0, 0);
margin-right: 2px;
border-radius: 10px;
-webkit-transition: background 250ms linear;
transition: background 250ms linear;
}
.track3:hover,
.track3.dragging {
background: #d9d9d9; /* Browsers without rgba support */
background: rgba(0, 0, 0, 0.15);
}
.handle3 {
width: 7px;
right: 0;
background: #999;
background: rgba(0, 0, 0, 0.4);
border-radius: 7px;
-webkit-transition: width 250ms;
transition: width 250ms;
}
.track3:hover .handle3,
.track3.dragging .handle3 {
width: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://enscrollplugin.com/releases/enscroll-0.6.1.min.js"></script>
<div id="scrollbox3">
<h1>New Scrolling Window</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a justo erat, volutpat hendrerit dolor. Sed urna nibh, dapibus at egestas non, vulputate ut quam. Morbi a erat tristique tellus varius venenatis. Aenean lacinia sem eget turpis fringilla commodo. Sed lorem nisi, viverra a interdum nec, varius eu enim. Donec ornare, nunc quis eleifend iaculis, nulla eros mollis tellus, quis faucibus risus odio non lectus. Maecenas ac velit non metus rhoncus commodo. Nunc ligula est, ultricies sed mattis sed, dapibus at arcu. Maecenas lacinia nisl ut sem bibendum ac condimentum purus facilisis. Curabitur ut nibh lobortis libero interdum vehicula vel quis nulla.</p>
<p>Suspendisse et massa urna. Donec eu lorem nec felis dapibus aliquam viverra in quam. Suspendisse ultrices, nisi ac venenatis porttitor, erat turpis dapibus augue, sed rutrum nunc ante sed enim. Aliquam et tempus mi. Nullam malesuada, nunc a eleifend pretium, justo lorem tempus justo, id adipiscing dolor ipsum sed velit. Maecenas odio massa, feugiat vel sodales ut, placerat at quam. Cras viverra diam vitae diam elementum vitae aliquet erat tincidunt. Quisque fringilla neque in lacus tempor cursus. Curabitur eget nulla et nisi dignissim tempor vel non risus. Mauris ac ipsum metus, a auctor massa. Nunc eros ante, ullamcorper a mollis nec, aliquam sed est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
Source: http://jsfiddle.net/jstoudt/f2Y5S/
I'm trying to make a crossbrowser implementation of background in 2 parts each of different color.
Like this: http://imgur.com/l6ajF2q
For this I've wrote following code (fiddle: http://jsfiddle.net/yrQAx/):
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
.block {
position: relative;
background-color: #ddd;
overflow: hidden;
}
.block .bottom-color {
position: absolute;
z-index: 999;
top: 10%;
left: 0px;
width: 150%;
height: 300%;
background-color: #bbb;
-moz-transform:rotate(173deg);
-webkit-transform:rotate(173deg);
-o-transform:rotate(173deg);
-ms-transform:rotate(173deg);
transform:rotate(173deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1.73);
}
.block .content {
position: relative;
background: transparent;
z-index: 1000;
}
</style>
</head>
<body>
<div class="block">
<div class="content">
<h2>Lorem ipsum</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia, nibh nec cursus ultricies, est ligula tempus lectus, eget eleifend orci ipsum vitae velit. Proin mollis pharetra fermentum. Nullam sed semper nulla. Donec fermentum faucibus faucibus. Aenean rhoncus, mi viverra ultrices tincidunt, erat nibh auctor nisi, nec fermentum turpis orci euismod ligula. Sed eu tincidunt nunc, non molestie nisi. Nunc consequat, est in euismod consequat, libero justo laoreet lectus, id ornare ante tortor non magna. Fusce porta fringilla elementum. Maecenas pharetra nunc orci, ut facilisis ipsum iaculis ultrices. Vestibulum non odio eget enim pulvinar facilisis a ac nunc. Vestibulum sodales augue et lorem pulvinar bibendum id id turpis.
Vestibulum blandit cursus imperdiet. Vestibulum venenatis massa diam, auctor pretium nisl rhoncus sit amet. Sed interdum metus tellus, id faucibus risus rhoncus vel. Duis tincidunt est quis justo suscipit pulvinar. Donec condimentum libero in turpis interdum, sed feugiat enim tempus. Vivamus a quam venenatis dui porta consectetur. Mauris ac scelerisque erat. Cras adipiscing purus a sem varius interdum ac sit amet nunc. Quisque iaculis ante nisl, non fringilla ante egestas eget. Sed sit amet est ultricies, commodo odio vitae, blandit justo. Fusce volutpat laoreet blandit. Mauris sapien arcu, sollicitudin quis porta non, rhoncus sed orci. Pellentesque faucibus neque at est ultrices dignissim. Quisque viverra, tortor ut feugiat aliquet, nisl nulla ullamcorper nisl, id laoreet dui turpis vel mi. Nunc sagittis, dui in posuere pharetra, libero nulla sollicitudin quam, venenatis imperdiet mi velit quis nibh.
Pellentesque nibh massa, faucibus et nisl nec, ullamcorper tincidunt nibh. Proin iaculis commodo sapien, nec dapibus augue luctus eget. Praesent magna augue, semper non orci id, vehicula imperdiet justo. Nulla porta gravida euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vitae est egestas, dictum quam ut, semper nisl. Suspendisse ligula orci, tincidunt venenatis convallis eu, condimentum in nunc. Vestibulum mollis fermentum malesuada. Sed rutrum erat quis quam molestie condimentum.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer consectetur congue massa, eu viverra nisi tristique ut. Maecenas pulvinar eget sem in pharetra. Nulla malesuada ultricies eros, ac tristique massa pulvinar ut. Fusce mattis auctor leo, ut ultrices eros ultricies vel. Fusce ac augue nec mi congue sollicitudin at quis nisi. In nec venenatis arcu. Integer ac mauris dapibus, imperdiet nibh suscipit, venenatis arcu. Etiam hendrerit magna ligula, et sodales nunc imperdiet id. Praesent dapibus erat ac ipsum tempor fringilla. Fusce posuere massa sit amet elit porta, in facilisis ipsum dapibus.
</div>
<div class="bottom-color"></div>
</div>
</body>
</html>
As you can see it is based on rotating div.bottom-color element which is responsible for second color. There's a big problem: whenever I resize container (div.block) second color can be lost at all or first color (div.container background) is being lost.
So my question is: how do I fix that? Or am I doing this wrong and this effect should be done in some other way?
Your best bet would be to use a gradient background. The angle will need to be adjusted, of course.
http://cssdeck.com/labs/xbmc9zum
.content {
background: #ebf1f6; /* Old browsers */
background: -moz-linear-gradient(-45deg, , #bbb, #bbb 20em, #ddd 20em); /* FF3.6+ */
background: -webkit-linear-gradient(-45deg, , #bbb, #bbb 20em, #ddd 20em); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, , #bbb, #bbb 20em, #ddd 20em); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, , #bbb, #bbb 20em, #ddd 20em); /* IE10+ */
background: linear-gradient(135deg, #bbb, #bbb 20em, #ddd 20em); /* W3C */
}
http://www.colorzilla.com/gradient-editor/
Your solution is not cross-borwser friendly. What you should do instead is create a .png image that has one side triangle with the dark gray. And make the other side 100% transparent and let the background color see through. The image you make WILL be large - but fortunately png images take only a few bytes when you only use 2 colors.
Your best bet is to use cimmanon solution (gradients).
However, if you want to make your solution work, see that CSS
top: 0px;
right: 0px;
width: 150%;
height: 300%;
background-color: #bbb;
-moz-transform:rotate(-26deg);
-webkit-transform:rotate(-26deg);
-o-transform:rotate(-26deg);
-ms-transform:rotate(-26deg);
transform:rotate(-26deg);
-webkit-transform-origin: top right;
transform-origin: top right;
I have added a trandform origin of top right. This way, you are making the div rotate around that point. Also note the top 0px and right 0px, That also make this point (the top right) well positioned.
With that changes, the div will be always where you want it.
demo