written on:3 Apr, 2008 by Alen Grakalic

Easy Scroll: Accessible Content Scroller

Delicious StumbleUpon Reddit Subscribe

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. Long time web professional with huge experience in all types of front-end work. Founder of Css Globe and creator of Easy front-end framework.
To get in touch, visit Alen's personal page, follow Alen on Twitter or become a Facebook friend.

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

Delicious StumbleUpon Reddit Subscribe

Read more! Here are our most recent articles:

View All Articles

Comments

  1. ani625 3 Apr, 2008

    Cool article dude!
    And btw, Link updated on delicious.

  2. cssglobe 3 Apr, 2008

    Thanks ani625 :)

  3. b0li 3 Apr, 2008

    nice article
    greetings

  4. kerberoS 3 Apr, 2008

    Great effect :)

  5. WebTecker 3 Apr, 2008

    Thats a very cool effect Alen.

  6. cssglobe 3 Apr, 2008

    Thanks guys :)

  7. Tomas M 3 Apr, 2008

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

  8. cssglobe 3 Apr, 2008

    Thanks Tomas. This version supports up and down, but who knows I might code a left-right scroll soon too.

  9. Germán 3 Apr, 2008

    Really useful! :) Thank you! ;)

  10. davidwalsh 4 Apr, 2008

    Great work Alen!

  11. Steph 4 Apr, 2008

    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!

  12. Chad Smith 4 Apr, 2008

    I've seen this while looking for a Horizontal Scroller (went with mootools). But this example really seems like something i'd use. thanks!

  13. Derek 4 Apr, 2008

    I wouldn't call this accessible though - you can't control it using the keyboard.

  14. cssglobe 4 Apr, 2008

    When I said accessible I meant that content is accessible. That's the important thing. Scrolling things is purely presentational.

  15. ani625 4 Apr, 2008

    "Join 3000+ subscribers and receive our content instantly." Therem fixed it!

  16. cssglobe 4 Apr, 2008

    @ani625: updated ;)

  17. Roman Lokhov 5 Apr, 2008

    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)?

  18. webfruits 6 Apr, 2008

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

  19. cssglobe 6 Apr, 2008

    I checked it out... Looks great! Glad you could find a use for it.

  20. Philly Dude 9 Apr, 2008

    Sweeeeeeet!!!! Nice, simple and easy to customize.

  21. emre 11 Apr, 2008

    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?

  22. cssglobe 11 Apr, 2008

    @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/

  23. Alberto 13 Apr, 2008

    It is posible add more than one easyscroll, I mean have several <div> with this funtionality.
    Thanks, great job.

  24. AndreiZorrov 13 Apr, 2008

    Useful!!!! Thank you very much!
    I searched for a very long time

  25. mexx63 17 Apr, 2008

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

    Thanks

  26. cssglobe 17 Apr, 2008

    @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.

  27. Mya 17 Apr, 2008

    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!

  28. Deborah 22 Apr, 2008

    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

  29. Juvenn 22 Apr, 2008

    Thanks for sharing!

  30. Krystal 23 Apr, 2008

    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!

  31. Daddo 29 Apr, 2008

    Great article and thank for sharing.
    I think I'll be using it soon on my sites...
    :-D

  32. Aaron Mc Adam 6 May, 2008

    Is there a way to make the content scroll itself? and then stop when the mouse hovers over it?

  33. graham 7 May, 2008

    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?

  34. weremoose 10 May, 2008

    Great, simple script... Very usefull. I was searching for a left-right one and I found this one. Well done!

  35. Pete 13 May, 2008

    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.

  36. Jim 15 May, 2008

    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?

  37. victoria 23 May, 2008

    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.

  38. victoria 29 May, 2008

    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

  39. fracto 29 May, 2008

    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!

  40. Tim Wye 5 Jun, 2008

    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.

  41. Jacob 6 Jun, 2008

    Nice script :D
    But, Is it possible to make it scroll horizontally instead?
    - Jacob

  42. Matias 11 Jun, 2008

    you are the man... thank you

  43. Rainer 2 Jul, 2008

    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.

  44. Simon Dempsey 5 Jul, 2008

    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!

  45. nodosur 6 Jul, 2008

    the buttons with text can be replaced by buttons with images

  46. Chrissy 9 Jul, 2008

    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.

  47. Gabor 10 Jul, 2008

    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;
    }

  48. Dempo 11 Jul, 2008

    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.

  49. Saboravallarta 11 Jul, 2008

    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 !!

  50. dario 15 Jul, 2008

    Great Job.
    But if i'd like insert more than one?
    Is it possible?

  51. Michael 18 Jul, 2008

    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.

  52. Owain 1 Aug, 2008

    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?


  53. Jorgen Farum Jensen 1 Aug, 2008

    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?

  54. Steph 3 Aug, 2008

    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!

  55. JanB 8 Aug, 2008

    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 ;)

  56. sjl 11 Aug, 2008

    I agree with JanB there should be use for the mouse wheel. I still think it is a great piece piece of script and it offers an alternative to a scrollbar.

  57. Pundit 12 Aug, 2008

    Nice stuff, but I'll echo the comments relating to usability because I consider this quite a major issue. To go even further, why bother reinventing the wheel at all? As far as I can tell, there is one advantage of this approach: a slightly nicer look than a normal scrollbar. However, as far as I'm concerned, the disadvantages far outweigh that: no indication of how much content there is, an inability to jump to any point in the content, no mouse wheel/keyboard support. In general, it's actually much harder to use this device than a standard scrollbar, which we get 'for free'.

    Maybe I'm misunderstanding the intent here - do you have a use case which demonstrates the need?

    Cheers.

  58. vicky 19 Aug, 2008

    Hi,

    I noticed that this website is using easy scroller but v2. The site URL is http://www.ski.com. I like the way I can scroll with arrows and how it auto scrolls. Is this the same base script as what you are refering to or is this another? I can't find information on how to mock it up.

    Thanks
    vicky

  59. Spencer Smith 19 Aug, 2008

    how do you put the buttons at the bottom of the scrolling text? Thanks.

    spencer

  60. Shobz 24 Aug, 2008

    Is there any way to reset div position (essentially an onClick event to reset the div position) by clicking on a button other that the Reset button provided in the script?
    This Script REALLY rocks!!... I just love it!!! Thnks a ton! :)

  61. Jonas 25 Aug, 2008

    @Spencer:
    in the js-file, change this line:
    parent.insertBefore(ul,container);
    to:
    parent.insertAfter(ul,container);

  62. Jonas 25 Aug, 2008

    function insertAfter( newElement, referenceElement ) {
    var parent = referenceElement.parentNode;
    var nextSibling = referenceElement.nextSibling;
    if ( nextSibling) {
    parent.insertBefore(newElement, nextSibling);
    } else {
    parent.appendChild(newElement);
    }
    }

  63. Jonas 25 Aug, 2008

    Click my name for scroll images example.

  64. Spencer Smith 26 Aug, 2008

    @Jonas,

    thanks for the tip. For some reason though, i can't get it to work. The buttons just disappear.

    you can look at my stuff here (i posted an example):
    http://avantstudios.com/clients/waldonstudio/web0808/portfolio-test99.html
    http://avantstudios.com/clients/waldonstudio/web0808/easyscroll.js
    http://avantstudios.com/clients/waldonstudio/web0808/waldon4.css

    Thanks.

    spencer

  65. melania 27 Aug, 2008

    thanks a lot!
    i've been looking for something like this.
    very useful and nicely clear !! >;)

  66. Ted 10 Sep, 2008

    Hi folk.

    This is a great scroller and an excellent basis for any project you wish to build on.

    However, I hava a little problem. The scroller works fine using IE6 but I am having a problem with scrolling when using Firefox.

    Firefox:
    1) Mouse hover over the down button, scrolling functions a little jumpy.

    2) Mouse over the up button, no scrolling on hover. Scrolls at half speed when button clicked.

    Has anybody experienced this problem and if so, maybe you can advise the fix. Again, using IE the scroller functions as designed

    Thanks

  67. Kristof 15 Nov, 2008

    Hi,
    Great scroller but I doesn't work for me on IE7. It will only display single words per line. On IE6 & Firefox it works ok. Did anyone else had same problem? Any ideas?
    Thank you for any assistance :)
    Kristof

  68. tenksheep 23 Nov, 2008

    great script, wish it could function horizontally also..

  69. Abhinav Shine 25 Nov, 2008

    Yes, this is really awesome ! But facing some browser compatibility problems! Good work :)

  70. Stephen 9 Dec, 2008

    Very nice. Thanks. I did come up with a couple enhancements if your interested. One is to not keep keep the timer event running all the time, just start it on the mouseover and turn it off on the mouseout. I also turn it off when it scrolls to the end so its not jumpy. Was a bit of a trick to get it to support more than one on a page but you can stuff everything into the obj (the div) and then you can have it dynamically support as many as you want.

  71. mayavada 15 Jan, 2009

    This is exactly what I've been looking for, however, I can't seem to get it to work. I'm a beginner with web pages, so I apologize if I'm missing something obvious.

    I follow the instructions by putting the Javascript link in the Head of my HTML document and I create and assign a div id "myContent". I even took the CSS off the demo and placed it in along with everything else.

    Is there something I'm missing? Do I have to format any overflow, height or width in myContent CSS?

    Thanks All.

  72. Donna 16 Jan, 2009

    This is really great! Thanks Alen, I'm a beginner who's learnt heaps through trying to implement this. Having said that, for some reason my scrolling will only happen in one direction - UP! on both the up and down arrows (I've used arrow images and moved them to the right side.) The reset works perfectly, and so does the scroll up. The prob is the scroll down also scroll's up. I've been examining every line but don't really know what I'm looking for. Can anyone give me a hint?
    Thanks again, much appreciated!
    Donna

  73. Donna 16 Jan, 2009

    ah perserverance is key! I figured it out, I had css styling for mycontent div in the easyscroll.css to position my content. I took it out and it all started working! I put the mycontent div inside the maincontent div and controlled the positioning through maincontent in css. I got there in the end!
    Thanks for such a nifty tool! :)

  74. Ronald 3 Feb, 2009

    Nice script one thing I am still struggling with however is getting the buttons (images in my case) to appear under the container rather than above it. I tried the suggestion above )replace the 'Before' with 'After' in the script but then as mentioned the buttons simply dissappear. Does anybody know how to change the script so the buttons appear under the container?

  75. Jerome 5 Feb, 2009

    Very smooth, does anyone know how to get 2 easyscroll windows on 1 page? I tried for hours changing var and stuff butt without any succes.

  76. Einar Pall Svavarsson 9 Feb, 2009

    Thanks, and a great work.
    I have used this with good result and small changes on two websites.The first one with one scrollbar and the second with two scrollbars.
    http://www.sigtryggurbjarni.is/nav02.html - one scrollbar
    and on the University of Iceland web page
    http://www.hi.is/is/felagsvisindasvid_deildir/felags_og_mannvisindadeild/adal/forsida - two scrollbars.
    Sorry about the long url.
    Best regards
    Einar

  77. jackie fitts 18 Feb, 2009

    I also am wondering about how to get 2 on the same page - if anyone has any input please let us know -
    thank you

  78. Einar Pall Svavarsson 19 Feb, 2009

    TWO SCROLLBARS ON SAME PAGE
    For those who are looking for 2 on the same page, please read my comment above from February 9th.

  79. Webtiful Search Engine SEO 26 Feb, 2009

    Great advice, love it.

  80. fatherb 3 Mar, 2009

    works great except in firefox where it is very jerky, shaky, jumpy when scrolling. does anyone have a fix?

  81. woody 25 Mar, 2009

    Hi, does this to support anchor tags, I want to click on a link outside the scrolling div and the content in the scrolling div to scroll to the <a name="name"> tag. In iE7 it works perfectly but in safari and firefox the whole page moves off the top of the screen placing the name tag at the top of the page - anyone else had problems with this?

    Otherwise fantastic script - thank you.
    Matt.

  82. ana 31 Mar, 2009

    Finally the great scroll!
    Thanks a lot for sharing
    http://sulvision.com

  83. xaer8 4 May, 2009

    Planning to use this useful javascript on my blog. Fantastic. Thanks a lot for sharing.

  84. Cliff 12 May, 2009

    Alen, thanks for the beautiful script! I've altered it a little but can't see how to make text loop. Is this possible?
    Best regards,
    Cliff

  85. JonDee 15 Jun, 2009

    Great Script!!!
    I am having a problem, though and was hoping someone cold help. If I put the div in a table, like
    this: <td rowspan="2" valign="top"><div id="myContent">
    My text is very narrow in IE7. Is there a way to fix this?
    Thanks!!!!

  86. Mic 19 Jun, 2009

    very nice! athx alot!

  87. Jeevan4u 20 Jun, 2009

    thanks a lot for this useful information

Sorry, further comments are disabled for this post.

CSS Globe is a web design magazine brought to you by Alen Grakalic and kept fresh with member contributed news and exlusive articles.

CSSG Ads

Useful Links

Friends