I have a web page that has content which extends past the right edge of the browser window. I set overflow-x: hidden on <body> to turn off the bottom scrollbar, but I can still scroll horizontally with the trackpad, which is not what I want.
Is there any way to prevent the browser from scrolling horizontally?
As a side note: Safari 4.0.4 only scrolls horizontally sometimes, and the scrolling feels "sticky" and "jumpy," whereas Firefox always smoothly scrolls horizontally.
you could try to set in CSS:
html{
overflow-x: hidden;
}
instead of use body selector.
I tried that and works in firefox.
I think the real question is, why do you have your content overflowing out of the intended size of the page? Is this content that you don't want users to actually see? In that case, put it in a div somewhere and set it's display to none. That would avoid the overflow issue entirely.
If there is a legit reason you want it to overflow the container, then set the size of the container explicitly, then the overflow-x to hidden. I haven't tested it, but that should prevent the current behavior. If not, try using a div, rather than the body tag. The browsers may be acting strangely because it's working on the body tag itself.
I would go into Chrome and open the developer tools on a desktop. Remove the overflow-x property. Then proceed to delete each parent element on your page. When you see that the horizontal scroll bar disappears, you know you have found your problem. Then dive into that element. My bet is you have a width of 100% and than a margin put onto it. Remove the margin if that is the case.
If all else fails, you could use Javascript to constantly force the browser to scroll to the left using window.scrollTo(xpos, ypos). For xpos you'll want to use 0 and ypos you'll want to get the user's current scroll position assuming you want to allow vertical scrolling.
You could put your function call either in the window.onscroll event handler, or in a javascript interval that runs every 100 ms or so. Up to you. If you need code examples just ask.
This would be better to understand if you had an example.
is this a long url or something with no whitespaces? Do you have white-space:nowrap; set on the element?
If you have a container with a defined size (one that fits in the viewport), the text should adhere correctly, (unless it's a long line with no spaces)
Old discussion, but it could be of use to people looking for the right answer !
Set "overflow:hidden" on the parent div of the element that is wider than the browser window (not html or body as you would normaly do), that will stop the scroll with de pad or the arrows pad...
Related
i am currently creating a web site and my problem is, that I have to put two DIVs on the page, that enable scrolling either one screen back or forth with a mouse click instead of the scrollbar (which is also usable) and I want them only to be visible, when there actually is something to scroll. So when the content fits into another DIV, there should not be any scroll back/forth button visible. They may take the space (or not) but I do not want them visible.
Now, I could poll the offsetWidth and scrollWidth of that other DIV with a 100ms interval, compare them and decide the visibility, but that is really ugly.
Is there some event I cloud use except resize, because that would not work on mobile/mac?
I did not find anything (yet) - neither on SO nor on the internet.
Thanks
In my App, I am creating the dynamic pages, in which I given the css property to page container as overflow-y:auto. all works fine,
the problem is whenever the page loads, the page height exceeds and the height of the contaienr, the scroll works, but the scroll bar placed in the end of page. so i am seeing the end of the content of the container instead of the top.
is there any way to sort this issue without using script? if so any one suggest me the correct way please?
or do I need to add any special css property in the container?
any one advice me the correct approach please?
Update
This is happening only with Chrome browser. ie and firefox behaves correctly.
try below combination
overflow-y:auto
position:relative
by adjusting position to relative your scroll bar will remains at what you want.
hope it will help for you the same way i am doing this thing its works for me
If i add a green div of a certain height to my page then scroll-bars are added, as expected. When i remove the div the scroll-bars disappear in all browsers but remain in IE and a white void takes the place of the div, somehow the div height is not recalculated correctly after the removal.
Please see this fiddle for a live demo, you will see that it works in all browsers except in IE.
http://jsfiddle.net/nzbrg/16/
The problem seems to be resolved when removing the overflow:scroll for html tag rule, unfortunately this is not an option.
I tested this in latest versions of IE, Chrome and FF and Opera.
Why is this happening and how can i force IE to display the correct height after the dom insertion ?
Note that when you resize the window the white void space disappears immediately, so i just need a way for this to happen without actually re-sizing the window.
It seems that when IE renders a height at 100%, if it grows it will stay the largest size as that is now it's new 100%. To make it shrink again, instead of giving it a height, you need to give it a min-height - change your html and body css to
body, html {min-height:100%;}
this should make your wrapper resize after the green block is removed:
http://jsfiddle.net/nzbrg/6
EDIT
The only way I have found to make ie re-render the page is to set the overflow property on the html:
$('html').css('overflow', 'auto');
http://jsfiddle.net/nzbrg/13/
Add $('body').css('height', 0);
http://jsfiddle.net/nzbrg/4/
I fixed this problem by animating the dom insertion and removal ( needs to be both ) with jQuery, this solution only works because i can use an animation off course.
I don't think this will work if you turn of animation
I would love to find a better solution, but currently this is going to be it. It looks better with the animation anyway so it's win-win ( for me at least ) :)
see here:
http://jsfiddle.net/nzbrg/15/
$("#spacer").slideDown();
$("#spacer").slideUp();
Sneaky Update:
If you disable animation with $.fx.off = true; then it seems to work to. Might have something to do with the way that the animation fumble with the styles to hide and show the div instead of just plain removing it.
Strange because i did also try to hide the element before removing it but was unsuccessful.
Anyway i'm sticking with the animations.
When I take mouse over the Navigation menu links (About Us..), the page moves to left. Is that due to javascript?
link text
It's because of the scrollbar that appears at the browser window's right side. It seems to me that there is a design error causing the content to be much larger with the menu hovered ...
if you hover the menu, the page gets so long that scrollbars occur - and that causes the page to "move to left" (it stays in the center of your viewport, which is what it should do). to fix this, find out whats causing this overflow (the page isn't looking that long, i don't know where the scrollbars come from) or set overflow-y:scroll for your body, so there's always a scrollbar (which would be the bad "i don't know what else to do to fix this"-solution)
Try moving the UL dropdown elements away from the bottom of the page or set them to display:none until after you've absolutely positioned them at the top of the page. visibility:hidden does not take the elemtens out of the flow of the document but just hides them.
A better bet though would be to make them children of the <a> tags you already have, so they only need to be displayed rather than displayed and moved.
whenever the page's height is larger than the web browser window a scrollbar will appear to the right so you can scroll down/up in your page.
could scrollbar be displayed with javascript/jquery all the time even if there is no need for it? (has to do with a layout issue i've got)
You can do that even without javascript, it is a CSS property:
overflow: scroll
But this will also always show a scrollbar at the bottom. Afaik you cannot avoid this.
It might be that this confuses the user somehow as normally he is not used to the fact that a scrollbar is shown even if he cannot scroll.
Before you use this solution, you should try to fix your layout issue.
If you give the appropriate container element the style `overflow: scroll' then it'll have scrollbars. You can do that with jQuery if you like:
$('#containerId').css({overflow: 'scroll'});
Or of course you can do it in a CSS file, or even right on the element itself. You'll have to figure out which element to do that to; post some code if you need advice.
Don't need javascript. Just add the css
body{
overflow: scroll;
}