CODEWITHSUNDEEP
javascriptscrollbrowser
Tgwizman
Tgwizman

Reputation: 1538

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

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?

Upvotes: 0

Views: 218

Answers (4)

Nick Beeuwsaert
Nick Beeuwsaert

Reputation: 1638

You could add a event listener for the scroll event, and then set the position then.

Upvotes: 0

aziz punjani
aziz punjani

Reputation: 25776

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

Upvotes: 1

rmorse
rmorse

Reputation: 736

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.

Upvotes: 0

mattacular
mattacular

Reputation: 1889

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.

Upvotes: 1

Related Questions