Bottom Scrollbar Control Example

This example demonstrates how to create a bottom scrollbar to control horizontal scrolling of a page element.

Start
600px
1200px
1800px
2400px
3000px
Current Position: 0px

Scrollable Content Area

This is a 1200px wide content area in a 400px container.

You can control horizontal scrolling by:

  • Scrolling directly in this area
  • Using the custom scrollbar at the bottom
  • Using the control buttons below

The bottom scrollbar syncs perfectly with this area!

More Content Area

Continue scrolling horizontally to see more content...

Here is some very long long long long long long long long text content

Scroll Information:

scrollLeft: 0px

Max scroll distance: 0px

Scroll percentage: 0%

Quick Controls:

Horizontal Control:
Position: 0px / 0px (0%)