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!

Solution 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.

Solution 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();
            });
        }
       }

Solution 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')
  }
});

Comments

[jmorhardt]

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.

[jmorhardt]

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?

[jmorhardt]

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?

[jmorhardt]

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

[Arman P.]

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 :)

[Karl Gjertsen]

Can you improve your answer by saying why this works?

[Alexander M.]

this solution is from here stackoverflow.com/questions/32068664/…