PDA

View Full Version : JS Changing the scroll position programmatically


cold wolf
June 11th, 2008, 03:13 AM
Is there a way to change scrollTop(), or any way to scroll the document at all? I don't want to scroll to where a certain element is, but rather just increment the scroll value.

Thanks in advance.
borrob
June 11th, 2008, 03:33 AM
scroll down:

document.getElementById( 'scroll_container').scrollTop = document.getElementById( 'scroll_container').scrollTop + 100;
cold wolf
June 11th, 2008, 04:16 AM
Thanks for replying.

I've already tried that and it turns out scrollTop is read-only. I've found a jQuery plugin called ScrollTo (http://plugins.jquery.com/project/ScrollTo) that should work.

Cheers.
borrob
June 11th, 2008, 04:20 AM
I use this myself and it works fine.
the scrollto scrolls an element into view, you said you didn't want that..
cold wolf
June 11th, 2008, 06:05 PM
Could you please put it into better context? It doesn't work for me at all. Using jQuery I've tried this:

$(document).ready(function() {
console.log(document.getElementById('container').s crollTop);
document.getElementById('container').scrollTop = document.getElementById('container').scrollTop + 100;
console.log(document.getElementById('container').s crollTop);
});

It simply returns 0 and 0 again after the supposed scroll down. "container" is the main div and the html is full of dummy text to get scrollbars. The CSS looks like this:

display: block;
margin-left: auto;
margin-right: auto;
width: 50%;

Correct, I don't want to scroll to an element, but ScrollTo has the option to scroll to absolute positions such as 512px and such. I'd like to avoid using a plugin, but I don't see any other way (I'm using jQuery for other reasons though).
TahirAhmadov
October 28th, 2008, 07:27 AM
cold wolf,
Are you sure you are scrolling the element that has scroll bars? I think in your case the div is stretched by your content and you have to scroll <body>. If you want to scroll the div, you have to set it's height at some fixed value and set overflow:scroll on the div.