This hides the scrollbar on Safari, but not on Chrome, why?
.inner-scrolling::-webkit-scrollbar,
.inner-scrolling::-chrome-scrollbar {
display: none;
}
Anyway, I did set up inner scrolling like this:
.inner-scrolling {
overflow: scroll;
height: calc(100vh - 64px);
}
.inner-scrolling::-webkit-scrollbar{
width: 0;
}
By applying width 0 to scrollbar, will hide scrollbar.
and for moz we can add scrollbar-width: none;
Related
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 have a burger class and I want to use overflow property to scroll. But when I use it this is how it looks:
I want to have that scrolling effect, but at the same time, I don't want those scroll bars to appear sidewise:
Here is my css class:
.Burger
{
width: 100%;
margin: auto;
height: 250px;
text-align: center;
overflow: scroll;
font-weight: bold;
font-size: 1.2rem;
}
Does anyone know what else can I add in these properties to hide that side scrolling bars. I want the affect to be present but not the bars, like this:
To hide your scrollbars but keep scrolling
Add this to your code
/* Hide scrollbar for Chrome, Safari and Opera */
.Burger::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.Burger {
overflow-y: scroll; /* Add the ability to scroll */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
also see this W3Schools
and the Browser compatibility for ::-webkit-scrollbar
.burger{
overflow: scroll; /* Add the ability to scroll */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
/* Hide scrollbar */
.burger::-webkit-scrollbar {
display: none;
}
Try This I Guess this helps if it's what you're looking for
Also see at W3Schools
::-webkit-scrollbar{
height:0px
width:0px;
}
// hides both vertical and horizontal scrollbar
How to use this to only hide vertical or horizontal? not both direction
I want to hide vertical scroll, but still work, overflow-hidden will disable scroll
Here's my solution to hide the scrollbar
html {
scrollbar-width: none; /* For Firefox */
-ms-overflow-style: none; /* For Internet Explorer and Edge */
}
html::-webkit-scrollbar {
width: 0px; /* For Chrome, Safari, and Opera */
}
html can be replaced with any element you want to hide the scrollbar of.
In -webkit-scrollbar, the width value is for the vertical bar, the height value is for the horizontal bar.
html::-webkit-scrollbar {
width: 5px;
height: 0px; /* If value is 0px, the horizontal bar will disappear but still works*/
}
For vertical scroll hidden and horizontal scroll auto:
overflow: hidden;
overflow-x: auto;
And for horizontal scroll hidden and vertical scroll auto:
overflow: hidden;
overflow-y: auto;
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 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.