Detect end of horizontal scrolling div with jQuery

Question

So, I've got some data tossed in a div. It's split up into chunks by date. It scrolls horizontally with the use of jQuery and the mousewheel plugin.

I need to fire an event when the div has reached it's terminal point (farthest left, farthest right). I think that it is possible with the way it is currently implemented to calculate when you cannot scroll any further by detecting the data fetched in the mousewheel plugin. I just need a nudge in the right direction. Here's the code that does the horizontal scrolling for me:

$(document).ready(function () {        
    $('#timeline').mousedown(function (event) {
        $(this)
            .data('down', true)
            .data('x', event.clientX)
            .data('scrollLeft', this.scrollLeft);
        return false;
    }).mouseup(function (event) {
        $(this).data('down', false);
    }).mousemove(function (event) {
        if ($(this).data('down') == true) {
            this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
        }
    }).mousewheel(function (event, delta) {
        this.scrollLeft -= (delta * 30);
    }).css({
        'overflow' : 'hidden',
        'cursor' : '-moz-grab'
    });
});

Can anybody give me some direction? Thanks!

Herren

Why the fancy scrolling? If you just remove vertical scrolling and set up the overflow-x:scroll it'll scroll horizontally without the hack. I'm guessing there's something that impedes you from doing that though? – Enallage

I'm using a plugin that gives teh horizontal scrolling effect without the scrollbars. It's like looking in a window and seeing what passes in front of it and nothing else. – Herren

Answer 1

Hey, I've prepared a page for you with the implementation. You can see how to detect the end of scrolling area with jQuery.

For the document as a whole you must detect in javascript whether .scrollTop has become equal to .scrollHeight. With jQuery it would be to detect:

if ( $(document).scrollTop() == ( $(document).height() - $(window).height() ) {
  // Do something here ...
}

The same is done for width. Have a look on example with div here.

Externality

Thanks for the quick reply. In the meantime I had implemented a plugin that seemed to do what I needed. However, with this solution, I was able to eliminate the need for the plugin. – Herren

Is there a way to limit the event firing? I'd like it to fire the first time you scroll to it and never again. Ideas? – Herren

Never mind - I just add a class to the object when it fires the event. Then I check to see if it has that class to decide if the event should fire again. Does that sound like a good solution? – Herren

Also, this works great for the leftmost end of the div, but what about the right? – Herren

For the right part play with the same vars. These are the only scroll related variables that you can use. The solution with class is ok, though you can use .data to store variable and check it, that way will be hidden from consumers :) – Externality

Answer 2

Here is the code that you want. It's proved that works on IE, Safari, Chrome, Firefox, etc.

Here is the HTML part.

    <div id="slide-wrap" style="width:1000px; height:200px; overflow:hidden; padding:0 auto;">
        <div id="inner-wrap" style="float:left;">
            <!-- 'Put Inline contains here like below.' -->
            <div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div>
            <!--  ...  -->
            <div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div>
            <!-- 'Put Inline contains here like above.' -->
        </div>
        <div style="display: block; width:40px; height:60px; position: absolute; margin-left:0px;   margin-top:40px">
            <img id='scroll_L_Arrow' src='../assets/img/l-arrow.png' onclick="scrollThumb('Go_L')"/>
        </div>
        <div style="display: block; width:40px; height:60px; position: absolute; margin-left:960px; margin-top:40px">
            <img id='scroll_R_Arrow' src='../assets/img/r-arrow.png' onclick="scrollThumb('Go_R')"/>
        </div>
    </div>

Here is jQuery part in JavaScript functions.

    function scrollArrowShow() {
        var maxScroll = ($('#inner-wrap').width() - $('#slide-wrap').scrollLeft()) - $('#slide-wrap').width();
        if ( 0 == $('#slide-wrap').scrollLeft()) {
            $('#scroll_L_Arrow').css({visibility: 'hidden'});
        }else{
            $('#scroll_L_Arrow').css({visibility: 'visible'});
        }
        if ( 0 == maxScroll) {
            $('#scroll_R_Arrow').css({visibility: 'hidden'});
        }else{
            $('#scroll_R_Arrow').css({visibility: 'visible'});
        }
    }

       function scrollThumb(direction) {
        if (direction=='Go_L') {
            $('#slide-wrap').animate({
                scrollLeft: "-=" + 250 + "px"
            }, function(){
                // createCookie('scrollPos', $('#slide-wrap').scrollLeft());
                scrollArrowShow();
            });
        }else
        if (direction=='Go_R') {
            $('#slide-wrap').animate({
                scrollLeft: "+=" + 250 + "px"
            }, function(){
                // createCookie('scrollPos', $('#slide-wrap').scrollLeft());
                scrollArrowShow();
            });
        }
       }

Metallurgy

Answer 3

$('.div-with-scrollbar').scroll(function () {
  var $elem = $('.div-with-scrollbar');
  var newScrollLeft = $elem.scrollLeft(),
      width = $elem.width(),
      scrollWidth = $elem.get(0).scrollWidth;
  var offset = 0;
  if (scrollWidth - newScrollLeft - width === offset) {
    alert('right end')
  }
  if (newScrollLeft === 0) {
    alert('left')
  }
});

Kuehl

Can you improve your answer by saying why this works? – Kaikaia

this solution is from here #32069164 – Lanate