DZS Scroller – jQuery Scrollbar Done Right

Here is a complete settings example for DZS Scroller:

Height

You can set the height of the scrollbar by using the height option. For example:

$('#myScrollbar').dzsScroller({
  height: 200
});

This will set the height of the scrollbar to 200 pixels.

Width

You can set the width of the scrollbar by using the width option. For example:

$('#myScrollbar').dzsScroller({
  width: 300
});

This will set the width of the scrollbar to 300 pixels.

Scrollable

You can specify which element should be scrollable by using the scrollable option. For example:

$('#myScrollbar').dzsScroller({
  scrollable: '#myContent'
});

This will make the element with the id myContent scrollable.

Theme

You can change the theme of the scrollbar by using the theme option. For example:

$('#myScrollbar').dzsScroller({
  theme: 'dark'
});

This will change the theme of the scrollbar to dark.

Rail

You can customize the rail of the scrollbar by using the rail option. For example:

$('#myScrollbar').dzsScroller({
  rail: {
    className: 'my-rail-class'
  }
});

This will add a class my-rail-class to the rail of the scrollbar.

Handle

You can customize the handle of the scrollbar by using the handle option. For example:

$('#myScrollbar').dzsScroller({
  handle: {
    className: 'my-handle-class'
  }
});

This will add a class my-handle-class to the handle of the scrollbar.

Snap

You can enable snapping to specific positions by using the snap option. For example:

$('#myScrollbar').dzsScroller({
  snap: true
});

This will enable snapping to specific positions.

SnapThreshold

You can set the snapping threshold by using the snapThreshold option. For example:

$('#myScrollbar').dzsScroller({
  snapThreshold: 10
});

This will set the snapping threshold to 10 pixels.

AutoHide

You can enable or disable auto-hiding of the scrollbar by using the autoHide option. For example:

$('#myScrollbar').dzsScroller({
  autoHide: true
});

This will enable auto-hiding of the scrollbar.

AutoHideDelay

You can set the auto-hide delay by using the autoHideDelay option. For example:

$('#myScrollbar').dzsScroller({
  autoHideDelay: 500
});

This will set the auto-hide delay to 500 milliseconds.

ScrollableX

You can enable or disable horizontal scrolling by using the scrollableX option. For example:

$('#myScrollbar').dzsScroller({
  scrollableX: true
});

This will enable horizontal scrolling.

ScrollableY

You can enable or disable vertical scrolling by using the scrollableY option. For example:

$('#myScrollbar').dzsScroller({
  scrollableY: true
});

This will enable vertical scrolling.

Here are the features of the DZS Scroller jQuery plugin:

1. Customizable via CSS: The scroller can be customized using CSS, allowing for easy modification of its appearance.
2. 3 skins included: The plugin comes with 3 pre-designed skins, but users can also create their own custom skins using CSS.
3. Enhanced functionality: The scroller includes features such as scroll by hover or fade on mouse leave, providing a more interactive user experience.
4. Works on iPhone/iPad: The plugin is fully compatible with touch devices, including iPhone and iPad.
5. Responsive design: The scroller is responsive, allowing it to adapt to different screen sizes and devices.
6. Autoheight and autoscrollbar: The plugin can automatically calculate the scroller height and scrollbar size based on the content area and visible area.
7. Reinitialization options: The scroller can be reinitialized after adding new content, allowing for seamless updates.
8. Free updates and support: The plugin comes with lifetime updates and free support, ensuring that users receive the latest features and bug fixes.
9. Multi-language support: The plugin is compatible with multiple languages, allowing for easy integration into international websites.
10. Easy integration: The scroller can be easily integrated into websites using a simple jQuery call.
11. Multi-content support: The plugin can handle multiple content types, including images, text, and more.
12. Dynamic content support: The scroller can handle dynamic content, including content that is added or removed after initialization.
13. Mouse wheel support: The plugin supports mouse wheel scrolling, allowing users to scroll through content using their mouse.
14. Easing support: The scroller includes easing support, allowing for smooth and animated scrolling transitions.

Each of these features is highlighted in a separate line, making it easy to quickly scan and identify the key benefits of the DZS Scroller jQuery plugin.