I want to remove only the top level scrollbar while preserving a few inside the page.
I found this but it removes all the scrollbars.
::-webkit-scrollbar
{
display:none;
}
Using overflow: hidden; on the body's css seems to do what I want but I'm unable to scroll down the page.
To sum it up, I want to hide only the main page scrollbar while preserving the rest and being able to scroll?
Try:
html, body {
overflow:hidden;
}
Or:
There is a CSS rule that can hide scrollbars in Webkit-based browsers (Chrome and Safari). That rule is:
.element::-webkit-scrollbar { width: 0 !important }
There is a CSS rule that can hide scrollbars in IE 10+. That rule is:
.element { -ms-overflow-style: none; }
There used to be a CSS rule that could hide scrollbars in Firefox, but it has since been deprecated. That rule was:
.element { overflow: -moz-scrollbars-none; }
Related
I've got a css background animation set to overflow:hidden on the body tag (Codepen below).
body {
overflow: hidden;
}
I also have regular page content that I still need to scroll as usual.
The overflow:hidden on the body obviously prevents this.
Is there any way to retain a regular scroll on my page content?
https://codepen.io/lowercase01/pen/GRrzQxG
I have come up with a solution I think addresses the problem you are trying to solve.
Following is a summary of what I have done.
I have wrapped the .background div into what I've called the .background-container. I then have set the .background-container height to 0, removed the the overflow:hidden from the body and, then reordered the divs so that the .wrapper div comes last.
Here is a link to the codepen, https://codepen.io/zukomgwili/pen/GRrzQeY.
How to hide scrollbar in browsers (Still scrollable)
/* Webkit */
::-webkit-scrollbar {
width: 0;
height: 0;
}
/* Firefox */
html {
scrollbar-width: none;
}
So I've hidden my scrollbar on Chrome with this piece of code:
::-webkit-scrollbar {
width: 0px;
background: transparent;
}
And I found that the best way to hide it in Firefox is to set margin-right: -16px on the parent div. And in Firefox, that looks great. However, the issue is now in Chrome because it moves the entire content inside the parent div to right. If I try to fix it by adding margin-right: 16px to the container inside the parent div, then it messes things up in Firefox.
I'm sure you've encountered this before, but is there anything I can do to fix this? Any known solutions?
Thanks!
If you just want to visually hide the scrollbar and still allow user to scroll with mouse or keyboard, you can try the following css:
html {
overflow: -moz-scrollbars-none;
}
You can just give padding only for chrome
::-webkit-scrollbar {
width: 0px;
background: transparent;
-webkit-padding-end: 16px;
}
Or just set -webkit-padding-end: 16px; on the parent div .
And you can use the same idea on Firefox also , Just setup this
#-moz-document url-prefix() {
parent div {
margin-right: -16px;
}
}
So the margin get only Firefox and you don't anything to change .
#-moz-scrollbars-none If you go to https://developer.mozilla.org/en-US/docs/Web/CSS/overflow and look at the Mozilla Extensions section, it says that "-moz-scrollbars-none" is "an obsolete API and is no longer guaranteed to work." Better to go with an approach that is more stable.
This question already has answers here:
Hide scroll bar, but while still being able to scroll
(42 answers)
Closed 6 years ago.
I want to print my html page into a PDF file, but don't want the scroll bar showing there in the PDF file. And my page have a scrollable body, so if I set this:
* {
overflow: hidden;
}
The body will be incomplete in the final pdf file.
So if there is a way just prevent the scrollbar from showing but the content still scrollable?
You can set display of scrollbar to none by:
::-webkit-scrollbar {
display: none;
}
This will hide all the scrollbars without disabling scrolling.
Edit: this only works on chrome, for a better explanation you can check this answer Hidding Scrollbar
There is a CSS rule that can hide scrollbars in Webkit-based browsers (Chrome and Safari). That rule is:
.element::-webkit-scrollbar { width: 0 !important }
There is a CSS rule that can hide scrollbars in IE 10+. That rule is:
.element { -ms-overflow-style: none; }
There used to be a CSS rule that could hide scrollbars in Firefox, but it has since been deprecated. That rule was:
.element { overflow: -moz-scrollbars-none; }
I'd like to have a scrollbar at the bottom of the div but this CSS works only in Firefox, not Webkit browsers like Safari or Chrome.
div.hoge {
width: 500px;
overflow: auto;
}
I googled and found some pages mentioning you should use overflow-x or -webkit-overflow-scrolling but they didn't work either. Need to use some JSs? Any guesses?
If you need a scroll bar to appear always then, you can use overflow: scroll
If you need vertical scroller then, overflow-y: scroll
If you need only horizontal scroller then, overflow-x: scroll
As per the questions title: You can write mozilla specific styles like this
#-moz-document url-prefix() {
div.hoge {
width: 500px;
overflow: auto;
}
}
Here is an example fiddle of a div that scrolls on x. If you don't include the white-space: nowrap, then the text just wraps within the div and only the vertical (y-direction) scroll bar actually scrolls.
The fiddle shows two div elements; one with nowrap and one without. Also I put borders on the div to make it easier to see.
overflow: auto; doesn't make scrolling DIV, use overflow: scroll;
if you want it on any particular axis, then use overflow-x: scroll; or overflow-y: scroll;
Have you tried overflow-x:scroll; ?
Also make sure that the div.hoge has the enough height to display the scroll bar at the bottom.
What CSS is required to make the browser's vertical scrollbar remain visible when a user visits a web page (when the page hasn't enough content to trigger the scrollbar's activation)?
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
This makes the scrollbar always visible and only active when needed.
Update: If the above does not work then just using this may.
html {
overflow-y:scroll;
}
Make sure overflow is set to "scroll" not "auto." With that said, in OS X Lion, overflow set to "scroll" behaves more like auto in that scrollbars will still only show when being used. So if any the solutions above don't appear to be working that might be why.
This is what you'll need to fix it:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
You can style it accordingly if you don't like the default.
Things have changed in the last years. The answers above are not valid in all cases any more. Apple is pushing disappearing scrollbars everywhere. Safari, Chrome and even Firefox on MacOs (and iOs) only show scrollbars when actually scrolling — I don't know about current Windows/IE. However there are non-standard ways to style scroll bars on Webkit (IE dropped that a long time ago).
html {
overflow-y: scroll;
}
Is that what you want?
Unfortunately, Opera 9.64 seems to ignore that CSS declaration when applied to HTML or BODY, although it works for other block-level elements like DIV.
html {height: 101%;}
I use this cross browsers solution (note: I always use DOCTYPE declaration in 1st line, I don't know if it works in quirksmode, never tested it).
This will always show an ACTIVE vertical scroll bar in every page, vertical scrollbar will be scrollable only of few pixels.
When page contents is shorter than browser's visible area (view port) you will still see the vertical scrollbar active, and it will be scrollable only of few pixels.
In case you are obsessed with CSS validation (I'm obesessed only with HTML validation) by using this solution your CSS code would also validate for W3C because you are not using non standard CSS attributes like -moz-scrollbars-vertical
body { height:101%; } will "crop" larger pages.
Instead, I use:
body { min-height:101%; }
An alternative approach is to set the width of the html element to 100vw. On many if not most browsers, this negates the effect of scrollbars on the width.
html { width: 100vw; }
I was able to get this to work by adding it to the body tag. Was nicer for me because I don't have anything on the html element.
body {
overflow-y: scroll;
}
Setting height to 101% is my solution to the problem.
You pages will no longer 'flick' when switching between ones that exceed the viewport height and ones that do not.
body {
min-height: 101vh;
}
works the best for me
I do this:
html {
margin-left: calc(100vw - 100%);
margin-right: 0;
}
Then I don't have to look at the ugly greyed out scrollbar when it's not needed.
html { height:initial!important; }
You may not need the !important - depends on what CSS is in place.