JQueryTOOLS: Detect Scroll direction in Scrollable

jQuery Tools is a collection of the most important user interface components for the web. These are tabs, accordions, tooltips, overlays, exposing effects and scrollables. They can dramatically improve the usability and responsiveness of your site. They mainly focus on presenting information and visual appeal. After all, this is exactly what most websites desperately want: to present their content to the reader in an easy and visually pleasing manner.

Here is meant to demonstrate how to detect scroll direction in Scrollable tools

The detection for scroll left or right can be implemented in onBeforeSeek function

We need two variables for scroll detection:

  • i as parameters, which start from 1
  • this.getIndex() as api function call, which start from 0

for example, there is 3 items in this Scrollable, what we get in the onBeforeSeek is i from 1 to 3, as well as this.getIndex() from 0 t0 2
so we can compare this two variables before it scroll.

Also, we are able to detect the last item scroll to left or right

This method only work on onBeforeSeek function, not work on onSeek function because i and this.getIndex() will always same.

Full script as below:

Reference from jQueryTOOLS Docs:

Leave a Reply

Your email address will not be published. Required fields are marked *