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;
}
Related
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
Is there a way to display the vertical scrollbar immediately after the page loads using javascript? I have a jquery slide toggle animation that, when activated, makes the vertical scrollbar appear because the toggle animation makes the page longer. The problem is that when the scrollbar appears, the document elements "spasm" or "shake". If the vertical scrollbar appears before the jquery animation is activated then I won't have the problem.
Update: overflow-y:scroll; does the trick without much compatibility issues!
Depending on your current function, you can use jQuery (or plain JavaScript) to find the current max-height (that the element can expand to without making the page longer), and simply apply that height (or one that's smaller) with overflow: hidden. Once the new element has been successfully added, the overflow can be re-set to overflow: auto; (or overflow: scroll;).
Or you can set position to fixed on elements animated at begin to avoid scrollbars...
Can you create a jsfiddle.net with a little example of your code ?
I have a problem with adding dynamic content to a webpage.
The javascript loads some html and swap the divholder's innerhtml. Basically is a
$("#mydiv").load("some.html");
My problem is that when you get a huge page, it created a huge scrollbar, then, after swaping the html for a smaller html, the scrollbars aren't being resized.
eg: http://jode.com.br/joe/scrollbarerror.png
Using firebug, you can see that the highlighted content is the window but the scrollheight is just a lot bigger than the contents of it
It is happening on firefox and ie, but not in chrome. Using chrome, hte scrollbars are updated to only scroll content
any help?
My solution right now is create a div that holds all the content. The div's scrollbar is being updated to the right size when the content changes.
THen I used the method:
html, body {
height: 100%;
}
#MainContentHolder {
height: 100%;
}
with this, the maincontentholder got the right scrollbars and is being updated correctly.
many thanks who tried to help!
Jonathan
I guess the bug is because of your height:100% on the body tag.
Why do you need it ? You shouldn't do that :) Try removing it and tell us if the bug's still here.
// Major edit, sorry in bed with back pain, screwed up post
One of the ad agencies I code for had me set up an alternate scrolling solution because you know how designers hate things that just work but aren't beautiful.
The scrolling solution is applied to divs with overflow:hidden and uses jQuery's scrollTo(). It's a set of buttons top and bottom that handle moving the content.
So, this is married in places to their CMS. What I have not been able to sort yet is how to hide the scrolling UI when overflow:auto would not have been triggered by the CMS content and the buttons are not needed.
The divs have set heights and widths. Can i detect hidden content? Or measure the div contents' height?
Any ideas?
So you want to get the height of a hidden element? I found this post maybe it is what you are looking for.
Its using jQuery, but the concept is the same. Hope this helps!
Metropolis
I hope i am mistaken, but you would need to emulate overflow by setting properties using some js, then you can get these values using getAttribute or your own method. Otherwise when you set overflow to auto, then the browser will be doing its own thing and the only value returned as a property of overflow would be a string like 'auto'.
Can you explain this better? You want to hide the scrollbar of a div set to overflow:auto when it doesnt have enough text to overflow? Browser does this for you.
You want to hide the scrollbar of a div set to overflow auto when it is scrolled down to some point, but you arent looking at it or hovering or something? That will be sort of complicated.
If you want to know if a div has overflow set to something, you just do:
object.style.overflow
and it will give you a string.
possible values:
visible
hidden
scroll
auto
inherit
you can set overflow the same way
http://www.w3schools.com/css/pr_pos_overflow.asp
from what i understand now is you have these divs with hidden scroll, but some graphic designer custom scroll bar and you use scrollTo to do the actual scrolling. BUT you problem lies when you dont have enough data to actuall need a scrollbar, but your graphic stuff shows up anyway, so you want to hide it.
so the real question here is how do you get the height of content? you want the property offsetHeight, but im pretty sure its still IE only.
What do you mean by CMS?
Yes you can access the div's content height, since you can access all of the div's children in JavaScript. (Sorry for not including example. I haven't work with pure JS in a while now so I don't want to point you in the wrong direction.)
Doing this, you'll kind of be able to "detect hidden content" and then be able to do what you actually want to do.
About your first question, I doubt you can control scroll bars once you've set overflow to auto.
Using jQuery height() on a div containing the content I am able to show/hide the user interface as needed based on whether height exceeds the CSS height of the div with overflow:hidden.
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...