Here is a simplified jsfiddle test.
This CSS causes no problem on a page where the content has overflow:
html, body {
height: 100%;
}
body {
overflow: auto;
}
But once this CSS is applied, despite scrolling, no element has a non-zero scrollTop:
html, body {
height: 100%;
}
body {
overflow: auto;
}
html {
overflow: hidden;
}
The problem seems to be applying overflow: hidden to the html element* causes the scrollTop of the body element to always return 0. Which makes no sense. There is a scrollbar with a non-zero position. How do I read/control it?
* doing this to prevent some ugly artifacts from CSS transitions, but also because it makes sense; we only want the body to scroll. Removing it is not an option.
Maybe you could create a fixed, fullsize wrapper around your page and remove the overflow:auto from the body. Then, the scroll you would be reading would not be from the body, but from the wrapper.
See this fiddle: http://jsfiddle.net/ZTt3S/1/
Related
I want to disable scrolling for when there's a popup, but I hate how the entire page changes size when you add/remove the scrollbar. Is there a way to disable scrolling without hiding the scrollbar?
Kind of like when you set overflow:scroll to an element that doesn't have enough content to scroll: it still shows the scrollbar but it's disabled.
//when popup is open, disable scroll on body
body.popupOpen {
overflow: hidden;
}
Make sure that the overflow (the scroll bar) is on the body element then add an overlay that will simply cover the body and its scroll bar when the popup is shown.
Here is a simplified example with only the overlay where you cannot scroll:
body {
overflow: auto;
margin: 0;
max-height: 100vh; /* no more than the height of the viewport*/
}
html {
overflow: hidden; /* This one is important to avoid the propagation */
}
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
}
.content {
min-height: 500vh;
}
<div class="overlay">
</div>
<div class="content">
</div>
The answer is no, but you can set 'hidden' and create a element to simulate the scrollbar, but why would you do this, it only makes the user confused.
You can create a div that fullfils the whole page view, and just make it transparent, this way you can just enable/disable the div scroll to mantain a scrollbar:
.theDivInactive {
background: none;
pointer_events: none;
width: 100vw;
height: 100vh;
overflow: hidden;
}
and switch the class when the popup is on the screen:
.theDivActive {
background: none;
pointer_events: none;
width: 100vw;
height: 100vh;
overflow: scroll;
}
`
I have fixed the issue the same way bootstrap does. Just in case other methods doesn't work for you, here's the JS trick to calculate scrollbar width for a given browser. Then on modal open, you can set the padding-right to body element:
const documentWidth = document.documentElement.clientWidth;
const scrollbarWidth = Math.abs(window.innerWidth - documentWidth);
document.body.style.paddingRight = `${scrollbarWidth}px`;
Note: this will only work well if you set overflow-y: scroll to popup bg or put the popup over the white strap that was created as the side effect of the padding-right property.
Note 2: If elements are positioned absolutely relative to body width, they will still "jump" so you need to add padding to them as well or wrap them with div that has position: relative
I have a problem with oveflow-x in my page. Althought the body has overflow-x hidden, I can still scroll on the page.
<html>
<body>
<div id="content">
<div id="mydiv"></div>
<div>
</body>
</html>
html and body have overflow-x:hidden.
Div "content" has nothing in the css and div "myDiv" has position absolute.
How can I make the "mydiv" not to go out of the page? Because now what happens is that I can still scroll on x.
Fiddle > http://jsfiddle.net/o7dph6sj
Without more code, the best answer I can think of is that your html and body tags do not have any kind of width set so they are inheriting the default width of 100%. Meaning that every child element is going to be inside of that 100%.
Set the body to have a set width and then set overflow to hidden, then check if the elements in your page are exceeding the width.
Example:
body{
width: 1024px;
overflow-x: hidden;
}
Also, the code that you set inside of #content could directly be affecting it as well, some elements will ignore its parents and be rendered outside of them which brings us back to... give us more code.
Because you're using a bad selector for overflow. If you want to avoid VERTICAL SCROLLING you use this:
html, body {
overflow-y: hidden;
}
to avoid HORIZONTAL SCROLLING:
html, body {
overflow-x: hidden;
}
to avoid BOTH
html, body {
overflow: hidden;
}
take a look to your forked fiddle where I avoid BOTH overflow axises and there's no overflow at all
Change "overflow-x: hidden !important;" to be
html, body {
overflow: hidden !important;
}
or
html, body {
overflow-y: hidden !important;
}
In-fact you can ignore "!important" since you use !important to override other rule. And here you were just using the wrong property "overflow-x" which is for "Horizontal scroll"
And it works!!!
Here is the working Fiddle > http://jsfiddle.net/o7dph6sj/1/
Updated the Answer with addition requirement:
You add "overflow: hidden" when you don't want both scrolls,
AND "overflow-y: hidden;" hides the Horizontal Scroll
AND "overflow-x: hidden;" hides the Vertical Scroll
Checkout the updated Fiddle and try on your by commenting and un-commenting this code:
html, body {
overflow-y: hidden; /* Hides Horizontal Scroll*/
/*overflow-x: hidden;*/ /* Hides Vertical Scroll*/
/*overflow: hidden;*/ /* Hides Both Vertical and Horizontal Scroll*/
}
Updated Fiddle "http://jsfiddle.net/o7dph6sj/3/"
Checkout these articles >
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
I tried for several hours and I found that the body size needs to be specified, and its attribute position must be set to absolute. Then you can have overflow-x: hidden work well in your code.
in this case, I have a web with a navbar that I want to slide right to hide from the main body in mobile size. I called #media screen and (max-width:576px) to make it run on mobile size. the problem occurred before I specify the max-width the body must be shown: I still can scroll to the right though I specified the overflow-x: hidden
so I added max-width:100vh inside the body style, and voila. it works!
checkout my code:
body{
min-width: 0px;
max-width: 100vh;
position: absolute;
overflow-x: hidden;
}
nav ul {
position: absolute;
right: 0;
width: 40%;
top: 34px;
height: 100vh;
z-index: 1;
background-color: #194ca7;
}
My html page displays empty disabled scrollbar, please see attached screenshot
How can i hide this scrollbar completely?
EDIT:
Sorry my mistake, i didn't mentioned that i am using overflow:hidden, but cannot hide this scroll bar.
i am copying my body code below
body {
color: #000000;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
overflow-x: hidden;
overflow-y: hidden;
}
I suspect it has nothing to do with overflow on your BODY element.
Even if you set overflow-y and overflow-x it's just like using the shorthand:
overflow: hidden;
same as for your margin, use only:
margin: 0;
// You have also other shorthand variants like:
// margin : top right bottom left;
// margin : topBottom rightLeft;
// margin : top rightLeft bottom;
// helps to keep your CSS file clear as possible.
So the probable issue lies in some most outer common parent element like some wrapper or container that has probably a style set to overflow: scroll;
like in this demo
Set overflow: hidden; in your CSS for the body:
body {
overflow: hidden;
}
Or to handle just the verticle scrollbar
body {
overflow-y: hidden;
}
This div below is causing the page to scroll horizontally on smaller then 1450px browsers. I thought overflow would fix this issue, but does not appear to... may be something I need to do on the parent div's. Any ideas?
http://barr-display.mybigcommerce.com/
#Header {
position: relative;
clear: both;
width: 1450px;
min-height: 190px;
overflow: hidden;
background: url('/content/headerbg3.jpg') repeat-x;
}
On body you need the following
body {
width:100%;
overflow:hidden;
}
The reason your code is not working is that you're setting overflow on the child(#header) when it needs to be set on the parent.
Looks like you want three things:
No scrollbar when header image is cut off.
YES to scrollbars when main page content is cut off.
Ability for your header background to extend to the right if the browser window is wide.
You really needed to post more of the relevant code here. However, I look at your site, and this'll fix it:
Change your rule for #outer:
#Outer {
clear: both;
margin: 0 auto;
min-height: 190px;
width: 1024px;
}
Remove the margin and width rules from #outer's parent, and replace with width:100%;overflow-x:hidden;
Add these lines to your css:
html, body {
width:100%;
}
body {
overflow-x:hidden;
}
You need overflow-x so the vertical scroll bar doesn't disappear.
Also, remove overflow: hidden; from the #Header.
I want to add these rules in my css
body{
overflow-x:hidden;
overflow-y:hidden;
}
But I want the scrollbar on the y-axis to be visible but should be dissabled.How can this be done?
Edit: Even simpler without a container div.
Try this:
html, body {
width: 100%;
height: 100%;
}
html {
overflow-x: hidden;
overflow-y: scroll;
}
body {
overflow: hidden;
}
Then, if you want the scrollbar enabled, remove overflow: hidden; from the body.
DEMO: http://jsfiddle.net/SKxhP/1/
Set your html height to 101%, this will cause the scrollbar to always show, thus preventing your content from jumping when the scrollbar would normally appear.
html{
height: 101%;
}
See here: http://jsbin.com/ixuhoj/edit
Please correct me if I misinterpreted what you needed.