I’m trying to find out how to check if an element is on the screen after horizontally scrolling a container using jquery.

I have a container div (class row-scroller) that contains a bunch of tall columns (unknown quantity). I’m trying to code a function that I can click a left or right arrow, and have it animated scroll to line that next column up with the furthest left edge.

I’ve gotten that pretty down pat.

But what I WANT to do, is check if the next column being targeted is already visible on screen, and only do something if it’s not. That one seems to be failing. Right now, 4 columns get displayed (this number could vary based on screen size), but once you scroll to the 4th last one (so there’s 4 on the screen, and no need to keep trying to scroll right), it’ll just keep trying to scroll to the next one anyways.

Example:

    <div class = "row-scroller">
    <div class = "volunteer_column"></div>
    <div class = "volunteer_column"></div>
    <div class = "volunteer_column"></div>
    <div class = "volunteer_column"></div>
    <div class = "volunteer_column"></div>
    <div class = "volunteer_column"></div>
    </div>

This is the relevant code, with comments:

col_selector = $('selector of that item'); // this var should changes to match the div currently lined up as the farthest 'left' div in the scrolling container


if(direction == "left")
{


if($(col_selector).prev('.volunter_column').length) //If the 'previous' column exists. I want this to say, if the previous column exists AND if that previous column isn't already visible.
{
//calculations
}
else
{
//different calculations
}


}
else if (direction == "right")
{

if($(col_selector).next('.volunter_column').length)  //If the 'next' column exists. I want this to say, if the next column exists AND if that next column isn't already visible.
{
//calculations
}
else
{
//different calculations
}

}

Thanks in advance!

Tried multiple functions that claimed to be able to detect if an element was visible within a scrolling container. None worked.