I have used overflow-x:hidden to hide my horizontal scroll bar. Its working well but I'm not able to see my horizontal scroll bar, but still it exposes the overflow when I select-and-drag towards the right side.
I need to avoid this. Can some body help me out in fixing it?
html
{
overflow-x: hidden;
height:100%;
position:absolute;
margin:0;
padding:0;
}
change overflow-x:hidden to overflow:hiddden
https://jsfiddle.net/L6tde8x8/
Related
My site
That page has text after the picture but wont scroll further down. Is it because my footer?
Any Tips?
For horizontal scrollbar, add
overflow-x:scroll;
overflow-y:hidden;
For vertical scrollbar, add
overflow-y:scroll;
overflow-x:hidden;
both horizontal and vertical scrollbar, add
overflow-y:scroll;
overflow-x:scroll;
Add these overflow to the body tag.
Hi there I am having trouble with a horizontal scroll bar appearing on my site, I have no idea why it is appearing. It only showed up when I was playing around with the footer however even after removing the footer it was still there.
The site I am working on is http://tritorial.com.au any help would be appreciated thank you.
Just add this in your css
body {
overflow-x: hidden;
}
if you are using w3css, make sure the width is 100% including the margins and padding
try adding clear:both; and overflow:hidden; to some items in your css.
I have a menu that slides in from offscreen. There's no horizontal scrollbar showing, but you can still slide the screen manually (in IE and Chrome, not Firefox) and see the offscreen div in the horizontal overflow. Obviously, I really want it hidden.
A simple example (without the javascript to make the offscreen div slide in) can be seen here and below:
<div id="maintext">I'd like the footer to display below, but the offscreen div to the left to not be visible by scrolling.</div>
<div id="footer"></div>
<div id="offscreen"></div>
body{
overflow-x:hidden;
}
#footer{
position:absolute;
top:1000px;
width:100%;
height:10px;
background-color:#000000;
}
#offscreen{
position:absolute;
width:100%;
height:100%;
z-index:1200;
background-color:#000000;
right:-100%;
top:0;
}
How can I ensure the user cannot manually move the page horizontally? overflow-x:hidden on the body (or a wrapper div) doesn't work... Seems to be the vertical scroll that's causing the problem.
This can be solved creating a div wrapper inside of your body and applying overflow-x:hidden; to it.
Check this working fiddle (try to scroll it).
.wrapper {
overflow-x:hidden;
}
On a simple mobile page, i tested on iOS safari have some overflow div using
div {position:absolute; right:-2em; /* or */ left: -3em;}
if i set the body using
body {width:100%; overflow-x: hidden;}
it only hide the scroll bar, but still able to pan to the right;
but if I do
html {overflow-x: hidden;}
it dose the trick but make scrolling very laggy. prob something simple that i overlooked.
thanks
EDIT:
sorry I didnt read your question correctly but try changing the block's position to this instead:
position:fixed;
it does what you want but that block will stay in that spot when you scroll up and down.
try that and see if it is what you wanted.
i am currently making a website but i have a horizontal scroll bar... here is the CSS for the body/html
body,html {
min-width:600px;
height:100%;
margin:0;
padding:0;
font-family:Calibri;
}
here is a fiddle: http://jsfiddle.net/charliejsford/8DSBY/
how can i get rid of the horizontal scrollbar even when the screen size is changed?
You should remove the width property from your footer css.
Overflow will mask the problem but doesn't address the root issue with the layout.
You can use the following in your CSS body tag:
overflow-y: scroll;
overflow-x: hidden;
That will remove your scrollbar.
width:auto; can solve your doubt?
Try removing width:100% from your CSS