Easy Scroll: Accessible Content Scroller

written on:3 Apr, 2008 by Alen Grakalic

Easy Scroll: Accessible Content Scroller

It has been a while since I presented some unobtrusive (hopefully useful) JavaScript function. Recently I have been working on a project that demanded content scrolling, so instead of reaching out for some heavy unobtrusive solutions, I decided to write my own function. As I was developing it I kept simplifying it so I came down to what I am presenting today - Easy Scroll v1.0, an accessible, unobtrusive content scroller.
I am not using any JS libraries with Easy Scroll. Although I enjoy jQuery a lot, I believe that it is important to code in "regular" JS, just not to forget it :)
So, Easy Scroll is standalone, lightweight script that is very easily applicable.

Take a look at the demo | Download Easy Scroll v1.0

Features

Easy Scroll is capable of scrolling any type of content by using unobtrusive JavaScript. It has up and down scroll options and reset button that places your content in the default position.
It also features double speed. When buttons are rolled over, slow scrolling starts. When buttons are pressed, speed increases.

Ok, let's get it going

To start with Easy Scroll download the script, and link it to your document by placing this line of code inside the head tag:

<script type="text/javascript" src="easyscroll/easyscroll.js"></script>

You'll also need a div with custom id (default is "myContent"). Then you should put some content in it of course :)

<div id="myContent">
	<!--  YOUR CONTENT HERE -->
</div>

Believe it or not, as far as the markup is concerned, that's it!

The script takes it over from here.
It creates another div id="easyscroll" and places your content div inside and takes care of the absolute positioning, scroll buttons and scrolling.

Setting things up

You might want to set the variables in the JavaScript. When you open easyscroll.js you'll notice these variables in config area

var id = "myContent";

This id matches the one you have in your html file for content div. If you wish to change it, you must do it in both html and JavaScript

var nav = ["Scroll Up", "Scroll Down", "Reset"];

Text that appears inside of each scroll button.

var navId = ["btnUp", "btnDown", "btnReset"];

These are optional id's for scroll buttons in case you want to apply some specific CSS for each.

var speed = 5;

Movement speed. The larger the number the faster the scrolling will be.

var height = 200;

Desired height of the Easy Scroll area.

Use css to style the content area. Oh yes, buttons are rendered as unordered list. Use css to style those too :)

About the author:

cssglobe's image Designer, developer and a passionate standardista with large experience in all types of front-end work. Started to get involved with web in 1999. and turned freelance in 2005., the same year he started Css Globe. Alen's work has been featured on numerous css galleries including famous Css Zen Garden official list. Available for contract work.

Enjoyed the article?

Subscribe to our RSS feed or share it with your friends.

Comments

ani625 on 3 Apr, 2008 wrote:

Cool article dude!
And btw, Link updated on delicious.
cssglobe on 3 Apr, 2008 wrote:

Thanks ani625 :)
b0li on 3 Apr, 2008 wrote:

nice article
greetings
kerberoS on 3 Apr, 2008 wrote:

Great effect :)
WebTecker on 3 Apr, 2008 wrote:

Thats a very cool effect Alen.
cssglobe on 3 Apr, 2008 wrote:

Thanks guys :)
Tomas M on 3 Apr, 2008 wrote:

Hello, that i'm looking for long time! thanks a lot :-)
can be used for left/top scrolling ?
cssglobe on 3 Apr, 2008 wrote:

Thanks Tomas. This version supports up and down, but who knows I might code a left-right scroll soon too.
Germán on 3 Apr, 2008 wrote:

Really useful! :) Thank you! ;)
davidwalsh on 4 Apr, 2008 wrote:

Great work Alen!
Steph on 4 Apr, 2008 wrote:

Gasp! I've been looking for something like this for awhile - I know it's on a few sites, but it was never validated or just didn't have the..best..code.

Thanks Alen!
Chad Smith on 4 Apr, 2008 wrote:

I've seen this while looking for a Horizontal Scroller (went with mootools). But this example really seems like something i'd use. thanks!
Derek on 4 Apr, 2008 wrote:

I wouldn't call this accessible though - you can't control it using the keyboard.
cssglobe on 4 Apr, 2008 wrote:

When I said accessible I meant that content is accessible. That's the important thing. Scrolling things is purely presentational.
ani625 on 4 Apr, 2008 wrote:

"Join 3000+ subscribers and receive our content instantly." Therem fixed it!
cssglobe on 4 Apr, 2008 wrote:

@ani625: updated ;)
Roman Lokhov on 5 Apr, 2008 wrote:

Great work Alen!
But don't you think that to use offsetHeight and offsetTop is very slow? Especially if the "myContent" have many content (images, flash)?
webfruits on 6 Apr, 2008 wrote:

I'm using it on my portfolio... great! I have customized scroll buttons by adding background images. It works perfect, thanks :-)
cssglobe on 6 Apr, 2008 wrote:

I checked it out... Looks great! Glad you could find a use for it.
Philly Dude on 9 Apr, 2008 wrote:

Sweeeeeeet!!!! Nice, simple and easy to customize.
emre on 11 Apr, 2008 wrote:

thanks for article... but I want ask a question,
how can I replace "graphic" instead of texts...
I mean; I want add UP and DOWN ARROW to the leftside of my div...
can I do that with this script?
cssglobe on 11 Apr, 2008 wrote:

@emre: sure you can. It is done via css. webfruits in the comments above did that on her site, you might want to check that out. http://www.webfruits.it/
Alberto on 13 Apr, 2008 wrote:

It is posible add more than one easyscroll, I mean have several
with this funtionality.
Thanks, great job.
AndreiZorrov on 13 Apr, 2008 wrote:

Useful!!!! Thank you very much!
I searched for a very long time
mexx63 on 17 Apr, 2008 wrote:

Cool, but about the width? How to make 100% or 90% of the page?

Thanks
cssglobe on 17 Apr, 2008 wrote:

@mexx63: that is done with css. In my demo the actual width is defined by the container. You can easily set it to whatever you want.
Mya on 17 Apr, 2008 wrote:

Excellent work Alen! I like that you didn't use an existing JS library. this will come in handy for future projects. Thanks for sharing!
Deborah on 22 Apr, 2008 wrote:

Awesome! Just what I was looking for! Thank you so much for making this available for all to share... Your work at PixelPusher is terrific.
dj
Juvenn on 22 Apr, 2008 wrote:

Thanks for sharing!
Krystal on 23 Apr, 2008 wrote:

This is AWESOME but I can't figure out how to apply this code so it works with up and down arrows. I am a beginner with CSS but haven't been able to figure out how Webfruits made the adjustment on her website. PLEASE HELP ALEN!
Daddo on 29 Apr, 2008 wrote:

Great article and thank for sharing.
I think I'll be using it soon on my sites...
:-D
Aaron Mc Adam on 6 May, 2008 wrote:

Is there a way to make the content scroll itself? and then stop when the mouse hovers over it?
graham on 7 May, 2008 wrote:

This is great, so thanks for sharing it.
However, I'm wondering how to add two blocks of scrolling text at different points on a page. If it uses ids, is this even possible?
weremoose on 10 May, 2008 wrote:

Great, simple script... Very usefull. I was searching for a left-right one and I found this one. Well done!
Pete on 13 May, 2008 wrote:

Nice work. thanks for sharing it. Looks like I'm not the only one who's after a lefty righty version! I wanted to do a scrolling image gallery where all the pics are the same height and contained within a fixed height (and width) DIV like jordanmakarof.com but without the need for scrollbars.
Jim on 15 May, 2008 wrote:

I'm trying to use this script but without the "reset" tab - what do I do if i want to not use that portion of the script?
victoria on 23 May, 2008 wrote:

this is great but how can I apply up/down arrows and place them exactly where I want them?
I am a beginner too...can't figure out what webfruits did.
victoria on 29 May, 2008 wrote:

OK. I have it working on every browser except MIE 6.0 and newer on a PC does not like it. Suggestions anyone??
Here is the page I'm using it on http://www.pslarchitects.com/projects.html
fracto on 29 May, 2008 wrote:

Hello!! I see the example of the web webfruits.it. I see the code to apply for my web but don't work correctly. Can you explain what is the code makes run correctly the script? (on the files .html, .css and .js)

Thank you very much!! Good job!
Tim Wye on 5 Jun, 2008 wrote:

This is fantastic - many thanks for making it available ! One question, though - anyone know why it doesn't display properly on IE6 ? The roll-over images don't work properly - instead of replacing the original graphic with the hover graphic, IE6 displays the two images vertically stacked without any roll-over swapping. (See webfruit's page if you have IE6). Works fine on later versions, and on Firefox.
Jacob on 6 Jun, 2008 wrote:

Nice script :D
But, Is it possible to make it scroll horizontally instead?
- Jacob
Matias on 11 Jun, 2008 wrote:

you are the man... thank you
Rainer on 2 Jul, 2008 wrote:

The scroller ISN'T accessible because of not working only with keyboard. Without mouse and with JS enabled I can't use them. And so the content isn't accessible for impaired people working without mouse but JS enabled! Sorry, good work but not to end.
Simon Dempsey on 5 Jul, 2008 wrote:

Super sweet bit of css Alen, nice work (the people love you!)
I notice a number ppl struggling witht the hover over image function (as per Webfruits site) - this is done with css people - check out this code from my style sheet:
#btnUp{
background-image: url(../images/global/scroll-up_off.gif);
background-repeat: no-repeat;
float: left;
height: 9px;
width: 67px;
margin-right: 4px;
}

#btnUp.over {
background-image: url(../images/global/scroll-up_on.gif);
background-repeat: no-repeat;
text-decoration:none;
}

#btnDown{
background-image: url(../images/global/scroll-down_off.gif);
background-repeat: no-repeat;
float: left;
height: 9px;
width: 67px;
margin-right: 4px;

}

#btnDown.over {
background-image: url(../images/global/scroll-down_on.gif);
background-repeat: no-repeat;
text-decoration:none;
}

Great job again Alen!
nodosur on 6 Jul, 2008 wrote:

the buttons with text can be replaced by buttons with images
Chrissy on 9 Jul, 2008 wrote:

Did anyone say if two can be used on the same page? I tried it, and one worked in IE, and the other worked in FireFox. Let me know if anyone has had luck with this! Thanks.
Gabor on 10 Jul, 2008 wrote:

The script is just perfect!
If you want to use image buttons instead of text buttons do the following:
1. Change script var nav to: var nav = ["", "", ""];
2. Take out the line: background in style in #easyscrollnav li
3. Add this lines to style:
#btnUp{
background:url(your_image.jpg)no-repeat 0 0;
}

#btnDown{
background:url(your_image.jpg)no-repeat 0 0;
}
Dempo on 11 Jul, 2008 wrote:

I am having problems with IE - has anyone fixed this? IE positions the "MyContent" div left on the page and the content itself appears below the buttons - any direction appreciated.
Saboravallarta on 11 Jul, 2008 wrote:

Yo pense que esto seria gratis, pero ya veo que no, lo que si es gratis es visitar: www.saboravallarta.com.mx Noticias Radio y Television Online desde Puerto Vallarta Saludos !!
dario on 15 Jul, 2008 wrote:

Great Job.
But if i'd like insert more than one?
Is it possible?
Michael on 18 Jul, 2008 wrote:

To dario, and the others that have asked about duplicitous use, from what I can see, no, not readily at least.

If you'll notice in the html, the div for the scrolling content is labeled as an ID, not a CLASS, ergo, one per page.

Which is not to say that some tweak to the js might allow for multilple IDs of different names. I'm not sure of the liklihood or not, just a thought. Perhaps the author might chime in.

Oh, and thanks for a very nice implementation.
Owain on 1 Aug, 2008 wrote:

Hi, I'm pretty new to Js and have the same problem as a few other people that have posted before me.

Im trying to use easyscroll in the same way as the webfruits site. where the buttons are down the right side of the content area...

The site im currently working on has a scroll bar by using the overflow css property.. Does anyone know anywhere online which shows you how to position the buttons to the right?
Jorgen Farum Jensen on 1 Aug, 2008 wrote:

I've tried to put a border around the scrolling tekst and some padding thru a line
container.style.padding = "1em"
This doesn't seem to work. I'm sure there must be a way, but how?
Steph on 3 Aug, 2008 wrote:

Worked great on a site I designed and coded recently > http://www.j-mayer.org/ for the tour dates :)

Still wish I could switch the buttons though - but still good scroller!
JanB on 8 Aug, 2008 wrote:

You should find a way to allow use the mouse-scrolling-wheel, because I hate it to use one given method to scroll. Sometimes I use the arrow keys, sometimes I grab the scrollbar or the top-down-arrows or as I said my mouse keys.
Be allows prepared for users like me ;)