Example #1
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
jScroller allows you to set the amount scrolled by the arrows (Up/Down, Left/Right), and the amount scrolled by the mousewheel (Up/Down, Left/Right). You can set the scroll amounts to either percentages (in fractional form; between 0 and 1), or an explicit pixel value.
This example is set to scroll 180px when the mouse wheel is scrolled. Try changing the scroll amount to see how scrolling responds.
*each number should represent 36px worth of height. So 72px will scroll by 2 numbers, 180px will scroll by 5, & 360px will scroll by 10, etc.
Example #2
P #1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend pellentesque nunc, vel interdum felis tempus in. Nulla interdum, purus ut auctor viverra, nisi justo vehicula magna, eget adipiscing ipsum elit nec velit. Nunc sit amet magna vel lorem ornare commodo. Morbi sem ligula, iaculis ut hendrerit id, eleifend non dolor. Curabitur ullamcorper elementum consequat. Aliquam condimentum feugiat leo semper iaculis. Suspendisse cursus libero nec lectus ultrices pharetra. Vestibulum a sem enim. Cras a metus sem.
P #2: Nulla ullamcorper sodales gravida. Vivamus a arcu quis leo tempor ultrices sed in sapien. Nunc vel nibh non diam pretium vestibulum non vel nisi. Aliquam convallis posuere erat, placerat aliquet tortor lacinia et. Curabitur a lorem sit amet sapien elementum sagittis sed a quam. In luctus, velit eu volutpat sodales, ipsum turpis sagittis mauris, et ornare lectus justo non arcu. Maecenas suscipit vehicula arcu ac malesuada. Fusce eleifend varius turpis eget porta. Sed vel eros ac ipsum faucibus congue. In hac habitasse platea dictumst. Pellentesque posuere fringilla massa, vel consectetur metus vulputate ut. Cras luctus mattis est vel egestas. Donec in tortor sit amet tellus volutpat lacinia. Quisque convallis, velit consequat scelerisque pulvinar, augue elit vulputate tortor, eget mattis nibh tortor a erat.
P #3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend pellentesque nunc, vel interdum felis tempus in. Nulla interdum, purus ut auctor viverra, nisi justo vehicula magna, eget adipiscing ipsum elit nec velit. Nunc sit amet magna vel lorem ornare commodo. Morbi sem ligula, iaculis ut hendrerit id, eleifend non dolor. Curabitur ullamcorper elementum consequat. Aliquam condimentum feugiat leo semper iaculis. Suspendisse cursus libero nec lectus ultrices pharetra. Vestibulum a sem enim. Cras a metus sem.
P #4: Nulla ullamcorper sodales gravida. Vivamus a arcu quis leo tempor ultrices sed in sapien. Nunc vel nibh non diam pretium vestibulum non vel nisi. Aliquam convallis posuere erat, placerat aliquet tortor lacinia et. Curabitur a lorem sit amet sapien elementum sagittis sed a quam. In luctus, velit eu volutpat sodales, ipsum turpis sagittis mauris, et ornare lectus justo non arcu. Maecenas suscipit vehicula arcu ac malesuada. Fusce eleifend varius turpis eget porta. Sed vel eros ac ipsum faucibus congue. In hac habitasse platea dictumst. Pellentesque posuere fringilla massa, vel consectetur metus vulputate ut. Cras luctus mattis est vel egestas. Donec in tortor sit amet tellus volutpat lacinia. Quisque convallis, velit consequat scelerisque pulvinar, augue elit vulputate tortor, eget mattis nibh tortor a erat.
P #5: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend pellentesque nunc, vel interdum felis tempus in. Nulla interdum, purus ut auctor viverra, nisi justo vehicula magna, eget adipiscing ipsum elit nec velit. Nunc sit amet magna vel lorem ornare commodo. Morbi sem ligula, iaculis ut hendrerit id, eleifend non dolor. Curabitur ullamcorper elementum consequat. Aliquam condimentum feugiat leo semper iaculis. Suspendisse cursus libero nec lectus ultrices pharetra. Vestibulum a sem enim. Cras a metus sem.
P #6: Nulla ullamcorper sodales gravida. Vivamus a arcu quis leo tempor ultrices sed in sapien. Nunc vel nibh non diam pretium vestibulum non vel nisi. Aliquam convallis posuere erat, placerat aliquet tortor lacinia et. Curabitur a lorem sit amet sapien elementum sagittis sed a quam. In luctus, velit eu volutpat sodales, ipsum turpis sagittis mauris, et ornare lectus justo non arcu. Maecenas suscipit vehicula arcu ac malesuada. Fusce eleifend varius turpis eget porta. Sed vel eros ac ipsum faucibus congue. In hac habitasse platea dictumst. Pellentesque posuere fringilla massa, vel consectetur metus vulputate ut. Cras luctus mattis est vel egestas. Donec in tortor sit amet tellus volutpat lacinia. Quisque convallis, velit consequat scelerisque pulvinar, augue elit vulputate tortor, eget mattis nibh tortor a erat.
Click the button below to append some content to the container in this example. Watch as the scrollbars resize dynamically for the content.
You can resize the scrollbox on the fly and the scrollbars will automatically adjust.
Example #3
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
This example is of a container that only requires horizontal scrolling. It has an option set that allows the vertical mousewheel to scroll content horizontally when there is no vertical scroll. Try scrolling with the mousewheel when the container can only be scrolled horizontally, and when the container can be scrolled on both axes.
Append some more content so that vertical scrolling becomes needed to see how the scroll bars show/hide to accommodate the scrolling.
Append Content | Reset Content
This is also an example of a scroller using a theme other than the default. It is really easy to make your own themes
Example #4
