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;
}
Related
I want to make the scrollbar always visible. The problem is that I see it in chrome and safari, but not on Iphone and in mozilla.
I have next code
<div class="scrollbar">
Scrollable content
</div>
and the css code is as follows:
/* Scroll thumb styles */
.scrollbar::-webkit-scrollbar {
background-color: #f5f5f5;
border-radius: 10px;
width: 100%;
height: 2px;
}
.scrollbar::-webkit-scrollbar-thumb {
background-color: #000000;
border-radius: 10px;
}
On Android devices or in Chrome and Safari on desktop I see something as follows:
But on Iphone safari I do not see it:
I see it when I start to scroll and it has default styling.
Any idea?
Change width: 100% to width: 7px will work
::-webkit-scrollbar {
background-color: #f5f5f5;
border-radius: 10px;
width: 7px;
height: 2px;
}
::-webkit-scrollbar-thumb {
background-color: #000000;
border-radius: 10px;
}
to make both scrollbars always visible use overflow: scroll, make only x-axis scrollbar visible use overflow-x and overflow-y for y-axis. use overflow: auto when you want to display the scrollbar when there is content larger then the container
I have a grid who needs to be scrollable horizontally and vertically.
I want to hide (not disable scrolling function) vertical scrollbar only.
Tested solution 1
/* Hide scrollbar for Chrome, Safari and Opera */
.k-grid-content::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.k-grid-content {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
This solution hide all scrollbars
Tested solution 2
overflow-y: hidden
This solution prevents from scrolling
How can I hide vertical scrollbar only without losing the ability to scroll ?
Is it even possible ?
Customizing scrollbars is a cross-browser compatibility problem as Firefox limits you a lot.
For WebKit browsers you can set the width and height on scrollbars!
::-webkit-scrollbar
{
width: 0;
height: 8px;
}
This hides the vertical scrollbar but keeps the horizontal. It also removes default scrollbar style, so it needs to be corrected.
::-webkit-scrollbar
{
width: 0;
height: 1.2rem;
}
::-webkit-scrollbar-track
{
background: white;
}
::-webkit-scrollbar-thumb
{
background: hsl(0, 0%, 60%);
}
body
{
width: 1500px;
height: 1000px;
background: url('https://random.imagecdn.app/1920/1080');
}
Interactive Code
It's possible. Since we don't have your HTML, here's some sample HTML for the sake of the example:
<div>
<p>scroll down!</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>scroll up!</p>
</div>
This is the CSS that would allow you too accomplish the vertical scrolling without a scrollbar(Although I don't know how well this works for accessibility):
/* hide scrollbar but allow scrolling */
div {
-ms-overflow-style: none; /* for Internet Explorer, Edge */
scrollbar-width: none; /* for Firefox */
overflow-y: scroll;
}
div::-webkit-scrollbar {
display: none; /* for Chrome, Safari, and Opera */
}
/* other styling */
div {
border: solid 5px black;
border-radius: 5px;
height: 300px;
padding: 10px;
width: 200px;
}
* {
background-color: #EAF0F6;
color: #2D3E50;
font-family: 'Avenir';
font-size: 26px;
font-weight: bold;
}
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 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 want to hide my vertical scrollbar, but still be able to scroll both vertically and horizontally.
I have tried using
overflow-y: hidden; overflow-x: scroll;
But it removes the ability to scroll vertically.
I have tried styling the scrollbar with
html .example-container {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
and
html .example-container::-webkit-scrollbar { /* WebKit */
width: 4;
height: 0;
}
It makes both scrollbars hidden, and it is important for the horizontal scrollbar to be visible.
Example of all three methods tried:
https://stackblitz.com/edit/angular-gyq9ub
If you stylize your horizontal scrollbar then your vertical scrollbar somehow disappears and you are still able to scroll vertically as you asked. But it's unclear to me why it works
.example-container::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.example-container::-webkit-scrollbar-thumb:horizontal {
background: #a1a1a1;
border-radius: 3px;
background-clip: padding-box;
}
/* Track */
.example-container::-webkit-scrollbar-track:horizontal {
background-color: #dbdbdb;
border-radius: 3px;
background-clip: padding-box;
}
Create a wrapper div for your inner div and then set inner div overflow = auto. And the outer div overflow to hidden.
For example;
<div class="wrapper-div">
<div class="example-container">
<p class="content">
Start editing to see some magic happen :)
</p>
---
</div>
</div>
CSS:
.example-container {
height: 100px;
overflow: auto;
max-height: 100%;
margin-right: -100px;
padding-right: 100px;
}
.wrapper-div {
overflow: hidden;
}
Thats it! Please check this answer for better understanding.