CODEWITHSUNDEEP
javascriptjqueryjquery-toolsjquery-scrollable
Philip
Philip

Reputation: 5917

JQuery Scrollable scrolls further than actually wanted

I'm using JQuery Scrollables to display an image gallery, see http://www.mba-europe.de/lehr_veroff.html

In my setup, I have a .bscrollable DIV that contains a .bitems DIV that contains all the .item DIV's in analogy to .scrollable, .items and .item from the JQuery Scrollables demo page.

However, as you can see, scrolling doesn't stop as soon as the last element in the list is reached. Instead, the user can scroll further until only the last element is visible, followed by (in my case) three empty slots.

How do I avoid scrolling further, such that there are always no less than four elements visible?

Best regards, Philip

Upvotes: 0

Views: 185

Answers (1)

Emre Erkan
Emre Erkan

Reputation: 8482

You can use scrollable's api to achive that like this;

var $scrollables = $('.bscrollable').scrollable({
    size: 4,
    mousewheel: true,
    vertical: false,
    horizontal: true
}).data('scrollable');
$scrollables.onBeforeSeek(function(e, i) {
    var threshold = $scrollables.getSize() - 4;
    if(i > threshold) {
        e.preventDefault();
    }
});

Working example

Upvotes: 1

Related Questions