I know this has been covered a lot here, but none of the solutions seem to work for me. The scrollbar is still showing up on Windows OS (Firefox, Edge & IE).
Note: I don't want to mess with padding/margins
I can make it disappear but I loose scroll functionality. Here are some of the things I have tried and I may forget a few since I have gone through so many iterations.
::-webkit-scrollbar { width: 0px; }
overflow-y: scroll;
overflow-x: hidden;
-ms-overflow-style: none;
overflow: -moz-hidden-scrollable;
There have been a few others as well, but like I said, nothing is working. I did see some common solutions being altering the padding to faux disappear the scroll bar but I don't want to do this for fear it may break styling on some devices.
I also saw some suggestions to do pure javascript, subtracting child component width from parent component width or something like that but this was a very similar approach, just more dynamic which I also do not want todo.
I am trying to achieve this with pure CSS. Ideas?
Current code
.rec-left--body {
padding: 0px 20px;
.form-content {
overflow-y: scroll; // Chrome << removes scrollbar
overflow-x: hidden; // Chrome << removes scrollbar
-ms-overflow-style: none; // IE 10+ << removes scrollbar
overflow: -moz-hidden-scrollable; // Firefox << removes scrollbar
height: 48vh;
margin: 10px 0px;
padding: 0 15px;
#media (min-width: $screen-sm) {
height: 325px;
padding: 0 10px;
}
.form-content::-webkit-scrollbar {
width: 0px;
}
All you need to do for webkit-enabled browsers is
::-webkit-scrollbar { display:none }
I don't believe there is a pure CSS way to do this in firefox, as it doesn't currently support scrollbar customization. see related for the way to do it with padding, which might be your only option:Hide scroll bar, but while still being able to scroll.
This will somewhat work
-ms-overflow-style: -ms-autohiding-scrollbar;
But does not hide once the user scrolls. A better method would be to place your content in a parent div where overflow is hidden, but allow scrolling within your child div.
I know you said you did not want to mess with padding or margins, but I felt the same, I tried everything and what worked best for my solution was to always have the vertical scrollbar show, and then add some negative margin to hide it.
This worked for IE11, FF60.9 and Chrome 80
body {
-ms-overflow-style: none; /** IE11 */
overflow-y: scroll;
overflow-x: hidden;
margin-right: -20px;
}
Related
I don't use Bootstrap or reset.css/reboot.css, I am trying to built a website with generic css.
I am doing pretty basic things but I get "This element is causing an element to overflow" literally everywhere. I haven't done layouts without any css framework for quite some time and I can not find anything about this issue. Even a br is causing an overflow! What is this? I don't see any scorlls and everything looks just like I expect. This message is just annoying.
I inspected a little bit more and discovered that images are causing this. But I have
.img-responsive, .responsive {
height: auto;
max-width: 100%;
}
.img-thumbnail, .thumbnail {
padding: 0.25rem;
background-color: white;
border: 1px solid #dee2e6;
border-radius: 0.25rem;
box-sizing: border-box;
}
And if I delete this image, overflow message will go away for a few elements below. Can anybody tell me what's going on?
This will help.
html {
width: 100%;
}
From MDN:
A scroll container is created by applying overflow: scroll to a container, or overflow: auto when there is enough content to cause overflow. The Firefox DevTools make it easy to discover both scrollable elements and any elements that are causing overflow.
In the HTML Pane, a scrollable element has the scroll badge next to it...
You can toggle the scroll badge to highlight elements causing an overflow, expanding nodes as needed to make the nodes visible...
You will also see an overflow badge next to the node causing the overflow.
So, if the container has content that is overflowing, it'll be marked with overflow, as you've noticed. Either adjust the content to not overflow, or adjust the container itself to allow for the content without overflowing. The DevTools badges you've noted can be used to identify which items are overflowing which container.
I suggest to create a reset in html
/* ------------ Reset CSS ------------ */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
}
is there really any way to hide scrollbar in Firefox, without manipulating the padding/margin without set to absolute, and without creating a browser specific css file, I just want to know is there any clean solution like this.
::-webkit-scrollbar {
display: none;
}
Unfortunately this only works for webkit browsers.
html { overflow: -moz-scrollbars-none; }
you can use a trick
add a parent to your elements with this style
html, body{
height: 100%;
width: 100%;
overflow:hidden;
}
#container{
height: 100%;
width: 100%;
overflow: auto;
padding-right: 10px;
box-sizing: content-box;
}
this trick send the scrollbar out of the view , it's exist but user didn't see it
If the size of the content is less than the size of the window, usually Firefox will hide the scroll.
The problem that happens sometimes is that if the size of the content changes for any reason or the size of the window changes to the content, the scroll bar will reappear and cause a mutation in the page.
If you want the scroll to always be visible in Firefox, you can use the following command
html {
overflow-y:scroll;
}
So, my problem is that when I have some scrolled element, scrollbar on touch/mobile devices doesn't hide automatically when I didn't scroll the content. It's always stays visible. But, I have to say, I don't know if it's problem with my CSS .touch .scrollable rules or it's because I'm testing this in device emulator in Chrome (I don't have with me right now actual mobile device on which I could test it). If someone can take a look at my code: http://jsfiddle.net/om4xmwnh/ and tell if/what is wrong with it I would really appreciate the help. Thanks! :)
by using css we cannot Auto hide scrolling content sidebar on touch devices
we have to use mordernize js
I'm not sure if I understood your question, but if you want to hide the scrollbar and make it visible only when it's necessary for example on hovering the div, I think something like this would do it:
.no-touch .scrollable {
position: relative;
overflow: hidden;
}
.no-touch .scrollable:hover {
overflow: auto;
}
or something like this depending on the screen size you want this to take effect
#media (max-width: 700px){
.no-touch .scrollable {
position: relative;
overflow: hidden;
}
.no-touch .scrollable:hover {
overflow: auto;
}
}
if this doesn't work, I think your solution for this is using some scrollbar plugin or create one
I have a fixed sidebar on the left of my site with content that has too much content to display on the screen. How can I make that content scrollable while still allowing the right side to be scrollable?
I think a simple overflow-y: scroll; would suffice. I need to have a max-height on the sidebar, but setting that max-height to 100% does nothing. I'm sure this is a simple code pattern, but my CSS skills have deserted me today.
A simple example here:
http://jsfiddle.net/tvysB/1/
Set the top and bottom to 0, so that the sidebar is exactly the same height as the viewport:
#leftCol {
position: fixed;
width: 150px;
overflow-y: scroll;
top: 0;
bottom: 0;
}
Here's your fiddle: http://jsfiddle.net/tvysB/2/
I had this same issue and fixed it using:
.WhateverYourNavIs {
max-height: calc(100vh - 9rem);
overflow-y: auto;
}
This sets the max height for your nav in a way that is responsive to the height of the users browser and then gives it a scroll when it needs it.
If you are using position:sticky and want to add a scroll in it, #Marc answer works well adding to it I have added hiding scroll bar functionality
Solution with hiding scroll goes like this
.ContainerElem{
-ms - overflow - style: none; /* Internet Explorer 10+ */
scrollbar - width: none; /* Firefox */
max - height: calc(100vh - 9rem);
overflow - y: auto;
}
.ContainerElem:: -webkit - scrollbar {
display: none; /* Safari and Chrome */
}
I am trying to get rid of a distinctly unwanted second vertical scrollbar that has appeared on this page I am putting together, see http://abchealth.info/doc-mike-special/test3/.
My research here led me to try and remove the 'overflow' from my CSS, but this absolutely trashed my layout, so I am looking for a solution that removes the inner vertical scrollbar without changing anything else...
I'd much appreciate your help, thanks!
Here's my CSS:
/* Generated by KompoZer */
body {
background-image: url(http://abchealth.info/images/bg.png);
}
html, body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
}
div#wrap {min-height: 100%;}
div#mastercontainer {
overflow:auto; width: 100%;
height: 100%;
min-height: 100%;
}
div#header {
background-image: url(http://abchealth.info/images/header-bg.jpg); background-repeat:
repeat-x;
position: top; height: 96px;}
div#content {
}
div#innercontentmiddle {
margin: 0 auto;
width: 540px;
padding:10px; padding-bottom:510px;}
div#footerclear {
}
div#footer {
position:relative; margin-top: -510px; height: 510px; clear:both;
background-image: url(http://abchealth.info/images/footer-bg.jpg); background-repeat:
repeat-x;}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
change this: #mastercontainer {overflow:auto;} to #mastercontainer {overflow: visible;}
What's happening is 'auto' uses a scroll bar if the content is too big for the frame. Aka that div or w/e needs enlarged to avoid the scroll. Visible will let it overflow like I think you want. Either visible or even hidden would work with this code-- css is all about playing around and experimenting.
***Most browsers offer a plug-in called 'FireBug' -> download it. It allows you to edit the css etc of webpages while viewing. Very useful for css styling errors. Highly recommended for issues such as this.
This works
#mastercontainer { overflow: hidden; }
or the above solution works too.
Remove overflow:auto from div#mastercontainer.
If the problem is due to html, body { overflow-x: hidden;} then try using html, body{height: 100%;} it worked fine for me.
For anyone using ion-icons and bootstrap, the issue can be in ionic/structure.css.
I was using ion-icons on the website and in ionic/structure.css I found these two properties causing the issue and changing them solved the issue.
{
overflow: hidden;
overscroll-behavior-y: none;
}
Changed to:
{
overflow: scroll;
overscroll-behavior-y: scroll;
}
Setting overflow-y to'hidden' can in many cases remove the vertical scrollbar. As can setting it to 'visible' because that means that overflow is visible which means no need to scroll, so scrollbars are not visible.
Those setting however don't always work, because of what is said at https://developer.mozilla.org/en-US/docs/Web/CSS/overflow :
In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap.
The above link is a good resource for trying to understand how 'overflow' works in general, it's not as simple as you could hope.
For instance, another note, from there:
Setting one axis to visible (the default) while setting the other to a different value results in visible behaving as auto.