*** PLEASE ENABLE JAVASCRIPT ***

This script provides accessible mouse or touch operated 'button' controls for vertical and horizontal scrolling of divs, iframes, textareas or entire pages with user-variable scroll speed. Bi-axial scrollwheel support is also available.

S l i d e S c r o l l

Accessible Variable-Speed Buttons for Scrolling Divs, Frames or Iframes, with Touchscreen support.

- Features -
  • Scroll speed is controlled by the position on the button of the cursor or finger; larger buttons allow finer control.
  • For accessibility, scroll buttons can activated using keyboard navigation, then operated using the Up, Down, Left and Right arrow keys or Page Up/Page Down keys as appropriate.
  • A single button can be set to:
    • Scroll in 1, 2, 3 or 4 directions.
    • Scroll in both axes simultaneously.
  • To enhance operation, button response is modified in two ways:
    • Accelerate to the selected speed; prevents accidental large movements.
    • Ignore rapid movement; lets the cursor 'escape' from or pass through a button without performing an unwanted scroll. This is essential for omni-directional buttons.
  • Pressing the left mouse button provides a x3 'Turbo' mode.
  • Configurable maximum scroll rate.
  • Provides optional support for scrollwheel scrolling on both axes, which with hidden scrollbars is not normally possible.
    • The scrollwheel axis can be defaulted to vertical or horizontal
    • Switch the scrollwheel axis by clicking mouse button
  • Any graphic image can be used as a scroll control; they do not have to look like those used here.
    Design your own buttons to match the style of your site using Windows® Paint or Gimp.
    The design should indicate that speed is controllable.
  • Scroll controls need not be images, other elements such as suitably-styled <div>, <span>, <button> etc are also suitable.
  • Can call a user-supplied function, passing data required to change button states at scroll extremes or generate a 'percentage scrolled' display.
  • Converts relevant <object> elements into <iframe> to allow validation of strict doctypes.
  • If you prefer incremental scrolling, try VectorDiv.
  • For cursor-controlled div scrolling without on-screen controls, try CursorDivScroll.
  • To scroll div content by dragging, try DragDivScroll .

TO GET THE SCRIPT FILE WITH INSTRUCTIONS, CLICK HERE.

* Any suitable image can be used as a scroll button; they do not have to look like the examples used here *

Slider Control Image

ANY DIRECTION!


UP DOWN
LEFT & RIGHT

Scrollbar Toggle

Download Instructions and Source Code

This script not suitable? Tell us why.

 

Iframe Scroll Iframe Scroll

The <iframe> above was converted by the script from a marked-up
<object>, thereby allowing the page to validate 'strict'.




Window Scroll