March 24, 2012

how to scroll the content inside of a fixed-height container?

Question by bobighorus

I was wondering how I can realize with jQuery the simple example in the following image.

Basically it’s a fixed-heigt container div and I wish to make the content inside of it (a list of paragraph) scrollable up/down by arrows.

I need arrows commands and no scrollbars and I wish to not use any plugin (if it’s possible), like this old dhtml example.

Consider that I don’t know the exactly height of the entire content, because it’s ajax loaded and so it can be variable.

Any help will be strongly appreciated.

Thanks in advance.

enter image description here

Answer by Starx

You are probably looking for scrollTo Plugin. But, If you want to bring native HTML scroll bars, then defining a overflow property, does the job for you.

div { overflow-y: scroll }

Updates


I made a very simple demo of how the scroller can be create with just simple jQuery.

Another demo, with the scroll limits. Perfect to be called a plugin on the making.

Update 2

What you are looking for is click and hold event, which is not available but, we can use mousedown event to build a workaround.

Check a udpated demo

Basically, the idea is to start a interval on mousedown and clear on mouseup

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!