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.
Related
I already use overflow-y: scroll; to always reserve the scrollbar space and solve content moving when the scrollbar appears. But when I click on a select element, this scrollbar space disappears. How can I maintain this scrollbar space even when I click on a select?
I am using material-ui components and sass to customize it.
I found a solution to your problem here. You can use the following JavaScript to make the scrollbar always appear:
.frame::-webkit-scrollbar {
-webkit-appearance: none;
}
.frame::-webkit-scrollbar:vertical {
width: 11px;
}
.frame::-webkit-scrollbar:horizontal {
height: 11px;
}
.frame::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 1px solid black;
background-color: rgba(0, 0, 0, .5);
}
Solved the problem reserving the space of the scrollbar on width.
Instead of using width:100%, change to 100vw and decrease the size of the scrollbar(in this case is 16px)
body {
width: calc(100vw - 16px);
}
::-webkit-scrollbar {
width: 16px;
}
This works completely fine on desktops:
.container::-webkit-scrollbar {
width: 5px;
}
.container::-webkit-scrollbar-track {
background: none;
}
.container::-webkit-scrollbar-thumb {
background: #f5f5f573;
border-radius: 50px;
visibility: hidden;
}
.container::-webkit-scrollbar-thumb:hover {
background: #555;
}
.container:hover::-webkit-scrollbar-thumb {
visibility: visible;
}
The container is the container for the color buttons. The problem is that it doesn't disappear on mobile devices. Is there a way that I can make the scrollbar disappear when not scrolling down on mobile devices? And then just reappear when I scroll again?
I think that this way will only hide the scrollbar for chrome and some other browsers but might not work with other browsers.
I would recommend looking at this StackOverflow question: Hide scroll bar, but while still being able to scroll
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px;
background: transparent;
}
I am creating a webpage using angular 8 with material design. I am using mat-select to dsiaplay various options. But it shows scrollbar as max-height of mat-select is 256px. I want to hide the scrollbar but enable the scrolling feature. I do not want to increase the height of mat-select-panel.
I have tried the following code but no luck so far.
trial 1::
::ng-deep {
.mat-select-panel-wrap {
overflow: hidden !important;
}
.mat-select-panel {
overflow-y: auto !important;
}
}
trial 2::
::-webkit-scrollbar {
display: none !important;
background: transparent !important;
}
You need to change webkit-scrollbar-track instead of webkit-scrollbar
Try this:
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: transparent;
}
I can't figure out why the following css works in Firefox, Safari but not in Chrome. I am trying to create a top fixed navbar which is centered and have a full width black background bar while keeping the contents of the navbar to display within 1200px max-width. I need to achieve this in a Squarespace template where I can only add custom CSS to an existing template and I don't have access to the page code. So I elected the pseudo insertion approach. All is good except Chrome doesn't want to display it correctly. The site link:
https://mango-lanternfish-lzhh.squarespace.com/
Thank you for your assistance in advance.
Attila
body, #navigator header#topBar {
max-width: 1200px !important;
margin-left: auto; margin-right: auto; }
#navigator header#topBar { background-color: #000000 !important; }
#navigator header#topBar:before {
content: "";
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 85px !important;
background-color: #000000 !important;
}
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.