How can you make an element with a scrollbar start off at the bottom of the scroll?
I have a div that has overflow: scroll. When the element is loaded, by default, we see the top of the element and you have to scroll down. I want the view to start at the bottom of the div instead.
JS fiddle example. Goal is to load the bottom element by default:
http://jsfiddle.net/2WpQf/
If you can use javascript, then you may do this (demo: http://jsfiddle.net/2WpQf/1/):
var div = document.getElementById("div");
div.scrollTop = div.scrollHeight;
There's a Jquery Plugin called ScrollTo, which can scroll for you progamatically.
ScrollTo()
Related
I have a fixed size div that dynamically shows content.
Should the content be too large for the div what I'd like to happen is for the contents of the div to start scrolling on it's own so the all the content can be seen.
Off the shelf solutions seem to force content to always scroll regardless if it fits inside in the div.
Thank you.
Adding to what Shahar mentioned, you can use jQuery animate api to scroll till the bottom of the div.
var dynamicDiv = $("#dynamic_div");
scrollHeight= dynamicDiv[0].scrollHeight;
divHeight = dynamicDiv.height();
if(scrollHeight > divHeight){
pageScrolls = scrollHeight/divHeight;
$("#dynamic_div").animate({
scrollTop: scrollHeight // scroll till the end of the div
}, 1500 * pageScrolls); // adjust the time based on how much scrolling needs to be done
}
Here's the jsfiddle
If you don't have css rules overriding your browser default styles, it's likely that scrollbars will appear automatically whenever there is overflowing content inside the element.
You can use javascript to test if the content overflows, and if it does, do whatever you want (add scrollbar, change style, use a jquery plugin for it etc...).
With jQuery:
var myDiv = $('#overflowing-div');
if (myDiv[0].scrollHeight > myDiv[0].clientHeight) {
// handle this
}
Based on this answer to check if container is overflowing:
How to detect overflow in div element?
How can be made auto scroll of content up when we expand last item on the page? This item is expanding but is not visible until we scroll.. I tried manipulating with css but it doesnt work. Overflow: scroll is enabled. Thank You
You can use following approach
On item expanding event execute this:
location.hash = '#item_id';
Here "#" is mandatory
try using JQuery Scroll.
var scroll = $(window).scrollTop();
Example: http://jsfiddle.net/satowan/8vqfxet7/
I have scrollable div. I want scroll the box on scrolldown or keydown but I have to click on the div to make it possible. Because when I try scroll it after page load then scrolled is the body.
What should I make to first scroll the div and after that body?
Try setting the focus on the div.
With jQuery something like $("#myDiv").focus();.
I have a website that uses dialogs. When I open that dialogs the body scrollbar is hidden and the scrollbar of the div that contains the dialog shows its scrollbar.
But, when I hide the body scrollbar, the content moves to the begining. How do I keep the position of the content when the dialog is opened?
For more information about this question, look the photos on Facebook. When you click a photo, I like to do that.
Can you give us the code you are using or a link to the site you are talking about? How are you hiding the scroll bar?
If it is by changing the overflow style property to hidden then am I correct in guessing that this only occurs the first time you show the dialog and subsequent appearances of the dialog do not move the content back to the top? If so I am not sure of the best way to prevent this but a quick hack would be to get your javascript to assign the overflow style property of the 'body's container div to auto upon loading.
Add the following to the top of your javascript:
window.onload = function ()
{
document.getElementById('container').style.overflow = 'auto';
}
where container is the id of the div containing your 'body' code.
try to use JavaScript to move the scroll to position:
document.getElementById('container').scrollTop = 50;
above will move scroll bar 50pix to the top, and you can get the max scroll height by:
document.getElementById('container').scrollHeight
Wait, I can't understand your question to well. If you wish to hide the scrollbars, use CSS to hide them.
<style type="text/css">
selector {
overflow: hidden;
}
</style>
I am using javascript to change the display of a div tag with an onclick event. The div is at the bottom of the page, when and/or if needed the user can open the div. How can I get the page to scroll down when this div is changed to display:block?
FYI: I have tried
var objDiv = document.getElementById("the_div_id");
objDiv.scrollTop = objDiv.scrollHeight;
The page just won't scroll down. Any ideas?
var objDiv = document.getElementById("the_div_id");
objDiv.scrollIntoView();
Something like this would work
Add an anchor by the div
<a href="#div" id="showDivTrigger">
<a name="div"></a>
<div style="display:none;">
contents
</div>
<script>
var element = document.getElementById('#div');
element.style.display = '';
</script>
scrollTop only makes sense on elements which themselves have a scrollbar (or do not, but can be scrolled). From the MSDN documentation: This property is always 0 for objects that do not have scroll bars. For these objects, setting the property has no effect.
You chould set body.scrollTop instead (or use window.scrollTo which has the same effect), for which you need the absolute position of the element in the page, which you can get by walking up the element's offsetParent chain and summing up offsetTop distances. You are probably better off using a framework, e.g. jQuery's offset method, than doing this manually. (Of course, if you only need to jump to the element and not visually scroll, then mplungjan's solution is the simplest.)