[Javascript] scrolling function

Paul Novitski paul at juniperwebcraft.com
Mon May 3 22:12:41 CDT 2010


At 4/2/2010 07:31 AM, jeffrey morin wrote:
>I am building a javascript scroller that has two buttons. When one is
>clicked it slides a list up and the other slides it down. It works fine
>except that I can't seem to wrap my head around how to get it to stop once
>it reaches the end of my list. Right now it slides by a set number of pixels
>but I would like to avoid the white space at the bottom. We're trying to
>emulate the functionality on this site.
>
>http://www.thefrisky.com/
>
>If you scroll down it's in the right column marked "most viewed". They have
>the two arrows for sliding up and down. When you get to the end of the list
>it stops. Mine just slides by a set number of pixels like I said so it keeps
>going and gives me white space. Using jQuery but am trying to avoid an
>entire plugin because I don't need all of the other options that those
>plugins come with.


Since you haven't shared your script, there's no way anyone can help 
you debug it. The problem is clearly to limit scrolling to the height 
of the scrolled object within the height of its container. If the 
current scroll position + new scroll height > content height, set new 
scroll height = content height - current scroll position.

Stepping back, however, I'd like to question the whole effort.

Why use JavaScript for this at all? Place the list inside a div 
styled with {overflow: scroll} and move on.

Why replace normal functioning of the browser (a div with a 
scrollbar) with a custom control that doesn't work as well as the 
original? Will your JavaScript widget work with page-up & page-down 
keys and the mouse scrollwheel?

The example on the thefrisky page you point to is, quite 
unnecessarily, devoid of content and functionality when JavaScript 
isn't running. It is therefore invisible to search engines, mobile 
devices, and other user agents that aren't processing script. Is that 
desireable? Much better to engineer the widget to display and 
function without scripting, then enhance it with JavaScript as you want.

Curiously,

Paul
__________________________

Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com 



More information about the Javascript mailing list