I have a fixed header and container div has scroll.
On click of a button I'm trying to add dynamic content on top it. Expected behavior is when dynamic content is added on top of button, button should be pushed down to make space for new element. This works fine in Firefox. But in Chrome button stays at the same place and browser scrolls upward.
Here is the codesandbox
https://codesandbox.io/s/nifty-allen-gtklp
Scroll down and click on the toggle button. Observe the behavior in Chrome and Firefox.
Anybody knows why the behavior is different?
in mozilla, you should use:
body{
overflow-y : scroll;
scrollbar-color: blue;
scrollbar-width: thin;
}
in chrome use:
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
Related
I figured out how to hide the scrollbar globally in an Angular app, but I ran into a scenario in my actual project where I need to hide the default scrollbar in a singular Angular component but have the default scrollbar visible in other components. ::host seems to not solve this problem. If anyone knows how to solve this problem, I would greatly appreciate the feedback! Also, if possible, I would love a CSS solution as I feel there shouldn't be any crazy solutions & or hacks to solve this. I made a quick stackblitz below...
https://stackblitz.com/edit/angular-ivy-syr7do?file=src/styles.css
Use this
*::-webkit-scrollbar {
width: 0px !important;
background-color: white !important;
}
*::-webkit-scrollbar-thumb {
width: 0px !important;
background-color: whitesmoke !important;
border-radius: 0px !important;
}
*::-webkit-scrollbar:horizontal {
width: 0px !important;
background-color: white !important;
}
*::-webkit-scrollbar-thumb:horizontal {
width: 0px !important;
background-color: whitesmoke !important;
border-radius: 0px;
}
Replace * with a specific class/id if you want.
Dont forgot to add overflow:auto
Try this:
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for Internet explorer and Edge */
.example {
-ms-overflow-style: none;
}
For hiding scrollbar in body globally put
body::-webkit-scrollbar {
display: none;
}
in your CSS file.
And using custom scrollbar in the other component, you just need to wrap in a container your content and set your custom scrollbar.
Here is the a demo.
I'm using this CSS code in order to customize my scroll bar style:
::-webkit-scrollbar {
width: 8px;
} /* this targets the default scrollbar (compulsory) */
::-webkit-scrollbar-track {
background-color: black;
} /* the new scrollbar will have a flat appearance with the set background color */
::-webkit-scrollbar-thumb {
background-color: #59e5f6;
border-radius: 10px;
} /* this will style the thumb, ignoring the track */
::-webkit-scrollbar-button {
background-color: black;
} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
::-webkit-scrollbar-corner {
background-color: black;
} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
body {
scrollbar-face-color: black;
}
It works great on Chrome, but not other browsers.
Do you have any idea how to fix that?
It's not supported in IE, Edge and Firefox by default.
Here is screenshot from documentation
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
Note: You can use javascript libraries like
perfect-scrollbar
Hide scrollbar but still scrollable in CSS
i try ::-webkit-scrollbar { display: none; } this is working only Google Chrome but i want all browser
so please help me?
I tried this on Firefox, Chrome, and Opera using CSS only. All work fine with it.
* {
/* hide scrollbar for firefox */
scrollbar-width: none;
}
/* hide scroll bar for chrome and opera */
::-webkit-scrollbar {
display: none;
width: 0px;
}
*::-webkit-scrollbar { width: 0px; }
I am having an issue with my WordPress site in firefox where the body seems to have "margin-top" or padding-top applied. When checking the code with firebug, no such style is shown. This issue is only in Firefox, Please help! Link: http://codecreatif.com/c6/
Add overflow: hidden at #main-header.
This happens because your menu gets out of the box to make the effect. When you make hover he make a vertical movement (down up), and that space is reserved for that animation.
#main-header {
background-color: #f9f9f9;
border-bottom: 1px solid #eeeeee;
margin-bottom: 60px;
overflow: hidden;
position: relative;
}
The new scrollbars in Lion seem to adjust their color in Safari based on the background color of the body element. Is there a way to manually set whether the scrollbar should be dark or light? I know there are webkit CSS options to style the scrollbar which actually predated the new Lion scrollbars. My only issue with using that method is that the bar no longer functions like the real Lion one which fades out after scrolling has stopped. While I suppose that this could be accomplished using CSS animations and javascript for recognizing the start and end of scrolling it would be nice to simply use the real scrollbar w/o all of the "hackery".
Krinkle's fix (or similar) is probably the best, but for those curious, it's somewhat possible to style the scrollbar in Lion, albeit extraordinarily annoying. Here's the basic idea:
html {
overflow: auto;
}
body {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
overflow-y: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 7px;
}
::-webkit-scrollbar-track {
visibility: hidden; /* doesn't seem to work */
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background: rgba(0,0,0,0.5);
}
::-webkit-scrollbar:window-inactive {
visibility: hidden;
}
This is my closest approximation to Lion's default dark scrollbar. Here's where I got this all from: http://css-tricks.com/9130-custom-scrollbars-in-webkit/
From testing on Safari/Chrome it seems it's watching the background color of the body element and the body element only. Not per se the area that is visually underneath the scrollbar.
So when your page has a dark body background-color, it'll show a brighter, contrasting, scrollbar automatically.
For example the following:
html {
background: white;
}
body {
width: 50%;
background: black;
}
.. will trigger a white scrollbar (since the body background is black), however the surface the scrollbar is floating on (the right hand side of the html element) is white, so it's white on white (with a very subtle grey border).
See https://codepen.io/Krinkle/full/aPZNXp in Safari.
Huge thanks to #EdwardLoveall for his answer & corresponding link. This is my variation on his approach for a more iOS-style scrollbar (I'm using Lion + Chrome 19).
::-webkit-scrollbar {
background-color: black;
width: 1.25em /* 20px / 16px */;
}
::-webkit-scrollbar-thumb {
background-color: rgba(255,255,255,0.33333);
border: 0.25em /* 4px / 16px */ solid black;
border-radius: 1.25em /* 20px / 16px */;
}
As he noted, you can't really hide the track, but you can but a background on it. Making the background transparent doesn't seem to work either because it sits outside of the HTML element so there is just white below. Also a lot of properties like margin, padding, opacity, etc. don't seem to work but you can add a thick border the same color as the background to give the thumb a little room to breathe.
The only way is to set the light/dark background to html/body so the scrollbar would be of the opposite color and after that add the the desired background to the wrapper.
html,body {
height: 100%;
background: #000;
}
.wrap {
height: 100%;
background: #FFF;
}
The height: 100%; are for stretching the wrapper when there are a little content.