This JavaScript utility privides 'slider' buttons that can scroll divs, frames, iframes and textareas at variable speed.
Scroll speed is varied simply by moving the cursor along the length or height of the button, vertically or horizonally as applicable.
Each button can be configured to control scrolling either in a single direction only, or in any combination of up down left & right.
With simultaneous horizontal and vertical scrolling possible, a single button can become an omni-directional scroll control. Each button is comprised of any single graphic image of suitable design.
Ease of operation is enhanced by modifying button response in two separate ways.
- Acceleration
When a button is initially hovered at a given position, the scroll speed corresponding to that position is reached progressively rather than immediately.
- Cursor Speed
When over a button, the position of a fast-moving cursor is ignored. This allows the cursor to 'escape' from a button once a desired position has been reached. This is especially important with omni-directional buttons, allowing the cursor to be removed from the central neutral point, without performing an unwanted scroll movement.
S l i d e S c r o l l
'Slider' Buttons for Scrolling Divs, Frames or Iframes at Variable Speed using the mouse cursor
- 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 speed is controlled by the cursor's position on the button; larger buttons allow finer control.
- 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.
- Configurable maximum scroll rate.
- The mouse button provides a 'Turbo' mode.
- Converts relevant <object> elements into <iframe> to allow validation of strict doctypes.
- For cursor-controlled div scrolling without buttons, try CursorDivScroll.
TO GET THE SCRIPT FILE WITH INSTRUCTIONS, CLICK HERE..