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.

Posted by Michael in JavaScript on September 23, 2009

53 Responses

Nice script, mouse wheel could be a nice adition.

ozzysong on September 24, 2009 at 2:33 am

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

Ray Pettersson on September 24, 2009 at 2:35 am

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

And yeah, the scroll wheel would be good.

Ben on September 24, 2009 at 2:40 am

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

Michael on September 24, 2009 at 6:39 am

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

nico on September 24, 2009 at 7:25 am

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

Michael on September 24, 2009 at 7:27 am

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

Juan on September 24, 2009 at 7:40 am

Excellent work, thank you very much.

images on September 24, 2009 at 8:08 am

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

Lam Nguyen on September 24, 2009 at 10:41 am

Nice, something i can use for the current project :-)

Goran on September 24, 2009 at 12:00 pm

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.

Jeff on September 24, 2009 at 9:23 pm

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

Jason on September 24, 2009 at 9:31 pm

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…

Bob on September 25, 2009 at 2:33 am

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

Michael on September 25, 2009 at 6:59 am

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 on September 25, 2009 at 11:52 am

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

Michael on September 25, 2009 at 12:38 pm

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 on September 25, 2009 at 1:13 pm

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

Michael on September 25, 2009 at 2:20 pm

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

Grant on September 26, 2009 at 6:12 pm

Hey Michael,

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

Andy Gongea on September 28, 2009 at 2:36 am

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

David on September 28, 2009 at 7:11 am

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.

Jonas on September 30, 2009 at 2:12 am

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.

pooyan on October 02, 2009 at 3:20 am

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

Brian Jørgensen on October 11, 2009 at 8:18 am

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

Jerry on October 13, 2009 at 11:21 am

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

James Coletti on October 28, 2009 at 10:51 pm

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.

Rob on November 04, 2009 at 7:42 pm

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

Andrew deRenzy on November 05, 2009 at 8:29 pm

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

Iza on November 09, 2009 at 10:57 am

Thanx a lot…
Very useful

niks on November 16, 2009 at 5:32 am

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?

Ashley Alfred on November 20, 2009 at 4:33 am

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

Jegan on November 30, 2009 at 1:51 am

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

farhan on December 15, 2009 at 4:54 am

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

Raul on December 24, 2009 at 12:01 am

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

Georgiy on January 04, 2010 at 2:52 am

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.

john on January 15, 2010 at 10:54 am

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

Jannik on January 16, 2010 at 6:24 pm

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?

Gem on January 23, 2010 at 3:14 am

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

Felipe on January 28, 2010 at 11:02 am

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

pooyan on March 07, 2010 at 7:23 am

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.

Harry Alffa on March 24, 2010 at 10:23 am

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?

Nebojsa Kamber on March 24, 2010 at 7:04 pm

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

scroller not user。

maqiang on April 12, 2010 at 3:44 am

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

Alessandro R. on May 15, 2010 at 10:53 am

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

John Slaytor on May 31, 2010 at 4:25 am

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

Ashish on July 01, 2010 at 3:20 am

Thanks for the script, and what updates to the site that you have been working on.

Craig on August 27, 2010 at 2:36 am
Comments are closed at this time.