How to make the browser stay scrolled at a fixed posistion?

Question

How can I keep the browser from scrolling, or how can I make the browser continually scroll to a fixed posistion?

I am working on a library for the Nintendo 3DS browser. I made the page fit perfectly within the browser, but the up arrow makes it scroll because the bottom screen is the only window recognized as the visible area.

I want to make it so the div #bottomScreen is the only thing in the bottom screen, and disabling scrolling is the only thing I can think that would work.

I have figured out how to scroll it to a said position via

document.body.scrollTop = 220;

How can I make it continually go to this position?

Making a repeating timer with setTimeout and putting the above code in it won't work. I believe it is because this only works prior to the page loading.

Any advice on how to enforce it?

Answer 1

A more elegant solution would be to disable scrolling when that method is called (to scroll to the position of 220 from top or whatever), and re-enable it whenever the appropriate action has been taken by the user etc... jQuery example:

$('body').css('overflow', 'hidden'); // removes scrollbars entirely
$('body').css('overflow', 'auto'); // re-enable scrolling

Otherwise use setInterval() with a very short interval like 10ms to repeatedly fire your scroll function. If you are going to do this it would be wise to add some logic to see if the window is already scrolled to approximately the right position (allow for +/- 10px or something) so it isn't extremely jarring for the user.

Answer 2

It should work even after page load. Here's the code, although i'm not sure what the intent of the code is, might be annoying to the user.

setInterval( function(){ document.body.scrollTop = 200 }, 500 ); // set your time

Answer 3

The best way I've seen on some sites (like twitter I think or facebook when an image pops up) which is to set the overflow property to hidden on the body element. This prevents any scrolling so all you need to worry about is the position of content when you do that.

I guess you would need to wrap the content in some sort of container element and when you change the overflow of the body element you also set the y-coordinate of the container to reveal the specific area of the page being looked at.

This is by far the best thing I have seen to achieve that effect because it doesn't require timers etc.

Answer 4

您可以为scroll事件添加事件侦听器，然后设置位置。