TinyScroller JavaScript Scrollable Div – 1.7KB

Javascript 58 responses so far

Scrollable Div

TinyScroller is a basic scrollable div script at only 1.7KB. It can be used with any HTML and degrades gracefully. The styling is completely customizable through the simple CSS. More features will be coming soon. I have redesigned leigeber.com and am going to be publishing a number of scripts and articles shortly. I will also be releasing my previous blog theme for free. A few of the upcoming scripts:

  • TinySlideshow V3 – many new features and fixes
  • TinyTable V3 – advanced search and filtering capabilities
  • TinySlider – sliding content script
  • TinyDrag – draggable box script
  • TinyBox V2 – many new features
  • TinyValidator – completely rewritten form validation
  • TinyTooltip – slick and full featured tooltip script
  • TinyEditor – lightweight JavaScript WYSIWYG editor
  • Bug fixes to all other existing scripts.

To initialize a scrollable div use the following code:

TINY.scroller.init('scroll','content','scrollbar','scroller','active')

The TINY.scroller.init function takes 5 parameters: the id of the parent content wrapper, the id of the content div, the id of the scroll div, the id of the scroll button, and the class of the scroll button active state (optional).

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Click here to view the demo.

Click here to download the script.

The following two tabs change content below.
Scriptiny is a web development blog featuring fresh articles on JavaScript, AJAX, CSS, XHTML, PHP, Photoshop and more.

Latest posts by Scriptiny Editorial (see all)

  • Nice script, mouse wheel could be a nice adition.

  • Brilliant! I'll put it to work right now! Thanks!

  • Ben

    Nice to see some raw javascript. Thats quite rare these days.

    And yeah, the scroll wheel would be good.

  • @ozzysong and @Ben – Absolutely, I will be adding that very soon. Thanks for the feedback.

  • looks very good, but it would be great if the standard scrollbar appears if javascript is turned off.

  • @nico – It does for me, where are you seeing that it doesn't degrade?

  • Juan

    Looks great, thank you! Does it support horizontal scrolling?

  • Excellent script! It will be helpful for my next project. Thanks!

  • Goran

    Nice, something i can use for the current project 🙂

  • Jeff

    I'm with Ben, it's great to see scripts that can be compared to the things the library's can do, but in raw javascript code. Great work with it and look forward to see some of the other scripts you mentioned.

  • Looks good, I may have use for this on a current project once mouse scrolling is implemented, sadly I know that'll be a deal breaker with my client. Keep up the good work, looking forward to the next scripts

  • Bob

    Fab script, I was just about to sit down and waste a couple of days attempting to create something inferior to this when I found it! Brilliant, thanks.
    P.S. Scroll wheel would be good though…

  • @all – Sounds like the consensus is scrollwheel support. I will get that done ASAP.

    @Juan – Horizontal scrolling would require changing a bit of the script and CSS. I will work in the ability to toggle it in the next update.

  • Looks nice. What's with all the function constructor calls in your code though?

    new Function("event","TINY.scroller.sp('"+f+"')");

    … Is there a specific reason for that?

  • @James – Originally I had the script setup to create named instances that needed to be evaluated. I have updated them to use function expressions now, ever so slightly more efficient 🙂 Nice catch.

  • Andy

    This might be a dumb question (not too familiar w/ javascript), but is there a way to utilize this when there are multiple instances of the main div (i.e. multiple records from a database)?

    When I try to set it up to display a couple of boxes, it no longer works.

    It works wonderfully other than that though! Thanks!

  • @Andy – I might be confused by your question but the script handles multiple instances perfectly. You just need to make sure that you have unique IDs for the different elements and then call init a second time with the second scroller's information. Contact me if you can't figure it out.

  • Grant

    Hi. Thank you. Very nice idea.

    I have a question please: How do I make Named Anchors work? If I insert an anchor and press the link, the scrollbar dissapears and the scrool window height narrows.

    Any help most appreciated.

    Thank you 🙂

  • Hey Michael,

    Great work! I really like the redesign. Good luck on monetizing your quality content.
    Cheers and keep up the excellent work.

  • This looks interesting, will give it a test run. Thanks!

    For those who are familiar with FleXcroll http://www.hesido.com/web.php?page=customscrollbar – how does this compare? Looks like TinyScroller is smaller, and cheaper (FREE!) to use on commercial sites….

  • Pingback: CSS Brigit | TinyScroller JavaScript Scrollable Div()

  • Jonas

    Nice work! It would behave more like a common scrollbar if one could click anywhere on the scroll DIV (i.e. on the "background" of the scroller) and make the scrollbutton jump in that direction.

  • hi, great work, just a small silly question !, can I use tags, I mean to click on a link like {back to top} and then it goes up ?!! thanks.

  • Hello, this is very nice. I really like it, but is it possible to make it scroll by mousewheel aswell?

  • Pingback: links for 2009-10-12 « toonz()

  • Wow thanks, was looking for a script like this. A great alternative to using iFrames with custom scroll bar.

  • Pingback: TinyScroller JavaScript Scrollable Div – 1.7KB « Web Development()

  • Very nice work. Eager to incorporate it into a new project. Also patiently waiting for horizontal scroll support 😉 Thanks for sharing.

  • Rob

    Great work Michael. I've been playing around with different options over the last few days and this beats them all for ease of us when it comes to implementing. Less than 5 minutes and I had what I needed. Fantastic job, really appreciate it. Thanks.

  • I am trying to edit this so the slider is verticle. I got it to go verticle but now the previous image shows up in the wrapper when the current image doesnt fill the whole thing.

    any help? my edit is at http://www.leet-side.com/slideshowscript.js

  • Iza

    Thanks for this nice script ! It's the fourth one I use from your collection and even as a beginner I'm always able to implement them very easily ! 🙂

    Mouse wheel on this one could indeed be a nice addition.

    Thanks again, Michael !!!

  • I am trying to find some examples of something I know I have seen in the past, but I am unable to put together a search that is coming up with anything. What I have is a div of content that I need to always be visible on the screen. The page needs to be scrolled to read through it all so I need a way for the div to move down the page as I scroll.
    Can anyone point me in the right direction?

  • Nice Script. One small Question can we scroll the content automatically.

  • Pingback: TinyScroller, DIV scrollable !| Webmaster – Ressources et outils gratuits pour votre site internet – Free Tools| Free Tools, Le meilleur des outils gratuits pour webmaster()

  • Pingback: 今すぐ使ってみたいjQuery プラグインのまとめ | Nutspress()

  • Pingback: Mes favoris du 10-12-09 au 14-12-09 » Gilles Toubiana()

  • farhan

    Hi,
    lovely scroller…
    i have tiny accordion and it works great, now i am try to ad tiny scroller
    but when i add tiny scroller , the accordion does not work

    can u help me

    thanks 🙂

  • Raul

    Hi,
    thank you for sharing!
    it is a nice scroller and if I use it in my website I will redirect a link back here.
    I was just wondering if the function of toggling between horizontal and vertical scrolling had been implemented. If not, which are the keys to achieve this?
    Thank you

  • Georgiy

    Yeah realy nice script but there is only one reason i will not use it – it's invulnerable for scrolling.

  • john

    the scroller has a bug if i attach the scroller in the same page although it is in different div ..
    the first scroll shows the original looks of the scroll but the other scroll shows the default look of a scroll.

  • Jannik

    I just tried the online demo in Opera 10 and Firefox 3.5, and it seems like the script doesn't work in Opera!

  • Gem

    hai sir.. im a newbie bout java script.. can u tech me how to apply this in my table.. cause im not using <div> i mean can i use this in my whole page?

  • Felipe

    Nice piece of code/art! Thank you for sharing this code…

  • sorry, but I 'm just asking my question again, how to use tags in this nice scrollbar ?!!
    thanks a lot for your awesome site.

  • Harry Alffa

    I came across TinyScroller when looking for a way to get a div to remember the scroll position of it's content (paragraphs). I see that on your demo when the back button is pressed, then forward, TinyScroller reverts it's content to the top, even if it was previously scrolled to the bottom. Any ideas on how to get it to remember it's scroll position?

    Cheers.

  • Fabulous little script! :))
    I'm trying to figure out how can I make scrollbar arrows for up&down.. I suppose I should call TINY.scroller.mv() but I'm having a hard time deciphering which arguments to put.. Could you help me a bit?

  • maqiang

    image shows up in the wrapper when the current image doesnt fill the whole thing.

    scroller not user。

  • Thanks so much… it' really an amazing script !!! Waiting for mouse wheel update !

  • The scroller doesn't work with the ipad – the whole screen moves instead of the scrollbar and there isn't an obvious way to prevent this (i/e/ not possible to select the scroll bar) – all help much appreciated

  • Ashish

    Coool Script, mouse wheel can be a good idea too.

  • Pingback: Reducing Load Time Through Image Optimization()

  • Pingback: A teenage pattern: A study of 20,000 high school students and the inter-relationships of their grades, cars, and jobs : Auto insurance, ins, vehicle insurance, assurance, automobile, insurance agency, insurance brokers, auto insurance rates, car insurance()

  • Pingback: Luxurious Hermes handbags in fashion world | 2011 Hermes Handbag Fashion Street beat()

  • Pingback: Using Hermes handbag in daily life | 2011 Hermes Belts Fashion Uprising()

  • Pingback: Verizon iPhone cases in short supply? | Teke Blog()

  • Mars

    Great thnx! but it realy needs mouse wheel !

  • Stephan

    I've updated the library to include: (1) mouse wheel support; (2) paging up/down by clicking anywhere above or below the thumbtrack; (3) limit the height of the thumb so that it doesn't become so small you can't grab it in the event you have a lot of content. Tested in IE/Chrome/FF.

    http://dotedelman.com/?p=36 

    and  http://www.newace.com/code/tinyscroller/

    Regards,
    Stephan.

  • balan

    HI how to use more than 1 scrollbar in a single page..