CODEWITHSUNDEEP
javascriptjqueryjquery-events
Priyank Kapasi
Priyank Kapasi

Reputation: 1783

Trigger an event when user clicks on a divs horizontal scrollbar arrow

I have a div with a horizontal scroll.

enter image description here

Note:

Actually I want the scroll to move a fixed no of pixels to the right when the user clicks the right scroll arrow and vice versa.

The event should not be triggered on scroll. It should be only triggered if user explicitly clicks the scrolls arrow.

There are multiple divs having scrollbars, having same class and no ids.

Would prefer to not use any plugins

Upvotes: 2

Views: 2395

Answers (3)

kongaraju
kongaraju

Reputation: 9596

Here is a demo for what you want

http://jsbin.com/opufow/4/edit

I hope this will help you?

Upvotes: 1

Oleg
Oleg

Reputation: 9359

Edit 2: Another suggestion is to do something like this depending on your implementation of scrolling areas (see working jsfiddle):

function CustomScrollArrow(elementToScroll) {
    var $el = $(elementToScroll);
    return $('<a>Click me to scroll</a>').css(/*...*/).click(function(){
        $el.scrollLeft($el.scrollLeft()+10);
    });
}

$('.ScrollAreaClass').each(function(){
    // You could choose to append to your scrolling
    // areas or their wrapper classes or whatever...
    $('body').append(new CustomScrollArrow(this));
});​

Afterwards it's just a matter of styling your handmade arrows.

Edit 1: I've seen you updated your question, so here's an updated answer with an alternative solution.

You can try to circumvent the problem by using a customized scrollbars implementation, for example jScrollPane by Kelvin Luck or any other, whatever. If the solution offers click events on arrows - then you're set. Otherwise just do a bit of tinkering...

I maintain, however, my point of view that unless you are looking to perform an action before the browser executes the arrow click, I would recommend adding an event handler to the actual result of that click, i.e. the scroll.

Doing this will help to avoid inconsistencies across various implementations of scrolling in browsers; will keep working if scrolling is performed in another manner (i.e. swipe gesture); will still work if there's some javascript code that replaces the default browser implementation of scrollbars.

jQuery offers the .scroll handler to capture scrolling and .scrollLeft to determine the resulting position of the horizontally scrolled content.

Try a working jsfiddle or see the code below:

// Cache the initial scroll position:
var initialLeftScroll = $('#wrapper').scrollLeft();
// Bind event:
$('#wrapper').scroll(function (ev) { 
    // Get new horizontal scroll offset:
    var currentLeftScroll = $('#wrapper').scrollLeft();
    // Determine the difference
    // (did the user scroll horizontally or just vertically?):
    var leftScrollDifference = currentLeftScroll - initialLeftScroll;
    // Now we can check 
    if (leftScrollDifference) {
        /* Do something here */
    }
    // Reset the cache:
    initialLeftScroll = currentLeftScroll;
});

Upvotes: 0

nandu
nandu

Reputation: 779

you can use .scroll function of jquery.

Upvotes: 0

Related Questions