jQuery serialScroll /scrollTo next and prev buttons assigned to just the visible element?

Question

I have one visible item on the page with the rest of the items hidden within a div which has overflow:hidden. I would like it if my next and prev buttons pertain to just the one visible item on the page. The problem is I have no way of selecting just the visible item. I tried checking with myitem.is(':visible') but it doesn't work because all the items are visible - just not showing through the overflow:hidden.

I tried messing about with classes and serialScroll but it's hard to get your head around the onBefore/onAfter callbacks.

Any idea how I can choose the visible item using jQuery , serialScroll or Scrollto ?

Answer 1

In the end I had to learn my way around those scrollTo callbacks. Here's what I did;

$('#scroller').scrollTo(activeprev, 800, {axis:'xy',onAfter: function(elem){
$('.views-row').removeAttr('id','active-row');  
elem.attr('id','active-row');
}}
);

The scrollTo plugin gives the elem option which can be used to mark the new node as active.

Answer 2

One way to check this would be to compare the position of the element with the position the div is scrolled to:

function isVisible(element) {
    var offset = $(element).offset();
    return offset.left + $(element).width() > 0
        && offset.left < $(element).parent().width()
        && offset.top + $(element).height() > 0
        && offset.top < $(element).parent().height();
}

jsFiddle: http://jsfiddle.net/XtAT7/