I have several elements with overflow: auto. It works nice. On macOS, scrollbars are automatically hidden when the user is not scrolling and appear on scroll.
On windows and on any browsers scrollbars are always visible. It makes an ugly rendering.
So how can I auto hide scrollbars on every OS and every browser when the user is not scrolling?
I know there is a lot of similar question but I haven't found a suitable answer
I found something ! I've never thought it could be so simple :
.my-elem {
overflow: hidden
}
.my-elem:hover {
overflow: auto
}
perfect-scrollbar is a
Minimalistic but perfect custom scrollbar plugin
It works with almost every web browser, including Internet Explorer.
<style type="text/css">
body {
overflow:hidden;
}
</style>
The code above hides both horizontal and vertical scrollbar.
Since every browser has its own default ‘user agent’ stylesheet, you may have to do a CSS Reset that resets the styling of all HTML elements to a consistent baseline. Then your HTML will appear the same on all browsers.
You can also Normalize. Normalize.css preserves useful defaults rather than "unstyling" everything.
Related
Some websites currently break functionality by placing overflow:hidden style into html and body tags to bully users into having lots of unwanted garbage displayed. As a user, how can i best override that?
Only talking about those two tags, where a site controlling overflow is nearly always doing so maliciously.
you could alter that from your browser's dev tools like inspect
You can use Devtools or try make or Found some plugin who change the overflow:hidden in browser or you can use Python i think.
Try putting an overflow-y: visible !important; in the body & html tags, that's to keep the y-axis with a scrolling functionality.
And if you don't want scrolling sideways on phones and tablets then add as well overflow-x: hidden; to both the body & html tags alonside with a position: relative; for the body tag, too
this happened while working on a specific project. I had a div with following css:
div.my-div {
position: sticky;
top: 60px;
}
(other styles applying to it as well, none affecting any css values related to position: sticky).
this div would become sticky when the page scrolled and it reached top of the viewport, but with scrolling a bit more would go away as if another sticky element was replacing it. for testing purposes, I commented out all other elements in the page and only inserted a dummy div with sufficient height to enable scrolling, and the behavior stayed the same.
this behavior was also limited to Chrome and Firefox (both latest version) and I could not replicate it in Safari. surprisingly, this css snippet fixed the issue:
html, body {
overflow-x: hidden;
}
setting overflow-x to hidden only on body or html didn't work, and this fix caused other Safari-only scrolling-related issues.
I ended up fixing the problem by changing the value of overflow-x on html and body using JS depending on the browser being Safari or not. however, I feel generally uncomfortable with this solution. anyone else had similar issues? any ideas on what might be causing this and are there any solutions to this not involving JS snippets detecting whether it is Safari or not?
position sticky is still not widely/fully supported in all browsers.
A parent with overflow set to auto will prevent position: sticky from working in Safari
Firefox 58 & below, Chrome 63 & below and Safari 7 & below do not appear to support sticky table headers.
are known issues, you can see how widely supported it is and current issues on caniuse.com
There are polyfills available such as stickfill but even these have their limitations.
I've used Stickybits in the past & have been pleasantly supprised if you want to check it out.
stickybits('[your-sticky-selector]')
In a website I am making, the scrollbar is messing up the horizontal alignment of my page, so I can use ;
html,body{
overflow-y:hidden;
}
But how can I still let the page scroll (just without showing the scrollbar)?
If you want a pure CSS solution than below snippet will help you achieve that with an ease
::-webkit-scrollbar {
display: none;
}
Demo (Only Chrome or Safari)
But since this is for webkit browsers only, you might have to use JS for a cross browser solution.
I think disable the scrollbar is not the solution, because in that case, you will need to find another solution to actually scroll the page...
like up & down keys, or make a mouse selection and go down...
...which is not an elegant solution in my opinion.
(not to mention that only will be affected webkit based browsers)
Instead, I suggest to fix your style so then the scrollbars will not screw up your layout.
One approach (without knowing your code, only guessing) is to use the box-sizing attribute.
Like:
#id {
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
}
So with this, the width that you are giving to that #id will be recalculate when the margin, padding or the border changes.
But again.. only guessing, if you want to show the code that is affected by the scrollbars, we can find a proper solution for this.
I have a website will have a background that is the full size of the screen. Because of cross-browser limitations, some of them like to keep a scroll bar even if the image is about the exact size of the screen. Is it possible for me to just remove the scroll bars?
In case you couldn't tell, I'm working with HTML, CSS, and JavaScript :)
body {
overflow: hidden;
}
and for ie 7
html {
overflow: hidden;
}
Try property:
overflow:hidden;
See also:
http://www.w3schools.com/Css/pr_pos_overflow.asp
Make sure your image is applied via the body tag, and if that does not work make sure it is applied to the html tag both of these tags via the Cascading Style Sheet file for example.
body {
background: url("image-src");
overflow: hidden;
}`
html {
background: url("image-src");
overflow: hidden;
}
Also remember to try and have the background image be of reasonable height and width.
Hope this helps.
Try adding html {overflow:auto;} to your CSS declarations. Auto overflow only gives the element the scroll bars it needs, even none at all. In the case of the disabled vertical scroll bar in IE, using auto overflow will remove it if it isn't needed.
This works a little better than using hidden overflow because you're declaring it on html or body. If your browser window becomes smaller than, not only your image but, your content you won't have any scroll bars with hidden overflow. As #Marc B said in a comment, removing user interface components to enforce a design is generally considered bad design.
You can read more about the overflow property here. From the site:
IE Trick
IE displays a vertical scrollbar all the time whether it needs it or not. This can be nice > for preventing horizontal jumps, but isn't always desirable. To remove this in IE, you can > set overflow to auto on the body element.
Is there a way to tell Safari / Webkit browsers and Firefox to scroll an element or a page while overflow is set to "hidden"?
I'm using overflow: hidden on the body-Element and it works for Opera only.
Any ideas?
Pretty sure this is one of those cases where Opera does it differently from everyone else. Overflow is supposed to prevent scrolling if its value is hidden, not just hide scroll bars.
If you really want to hide the scroll bars, but still want to scroll the window or its contents, you can use JavaScript / DOM script to do it.
Sorry but you have been mistaken, the overflow-x:hidden or overflow-y:hidden must be applied to the html element, not body element. But in just the case I have googled it and found these
link tell me if they did any help.
http://www.webmasterworld.com/javascript/3560359.htm
http://www.artmov.com/dev/snippets/apply-overflow-x-overflow-y-to-body-in-ie7-ie6-84/
(In this link I found the above mentioned statement.)
http://haslayout.net/css/Document-Scrollbars-Overflow-Inconsistency
In this link I found that you should apply directly overflow value in the <HTML> tag.
Hope it works!
If you're setting overflow: hidden on any element, you're explicitly telling it that the contents should be hidden, and therefore can't be scrolled to. If you want the contents to be scrollable, then you need to use overflow: auto. Why would you ever want to scroll something you're telling the browser it should not scroll? It's contradictory.