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.
Related
Is there a way to only enable scrollbar on the body only and disable on other divs?
This code disables all scrollbar in everywhere:
::-webkit-scrollbar {
display:none;
}
How to enable only on the body?
EDITED
Changing overflow is not the one I want. Let's say I want to create mobile friendly view editor, which able to scroll up and down inside the div content but the scrollbar should be hidden. The scrollbar in the body is necessary because I will have to edit the view from my desktop web browser.
Changing overflow will not help in this case.
These two CSS properties can be used to hide the scrollbars:
#parent{
height: 100%;
width: 100%;
overflow: hidden;
}
#child{
width: 100%;
height: 100%;
overflow-y: scroll;
}
jsfiddle: http://jsfiddle.net/5GCsJ/954/
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;
}
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/
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.