6

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!

Arman P.
  • 4,314
  • 2
  • 29
  • 47
jmorhardt
  • 183
  • 2
  • 3
  • 15
  • 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? – Thomas Shields May 11 '11 at 20:53
  • 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. – jmorhardt May 12 '11 at 13:22

3 Answers3

9

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.

Arman P.
  • 4,314
  • 2
  • 29
  • 47
  • 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 May 12 '11 at 13:23
  • 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 May 12 '11 at 13:24
  • 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 May 12 '11 at 13:27
  • Also, this works great for the leftmost end of the div, but what about the right? – jmorhardt May 12 '11 at 13:30
  • 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 :) – Arman P. May 12 '11 at 14:42
6

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();
            });
        }
       }
NOTSermsak
  • 356
  • 1
  • 8
  • 8
2
$('.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')
  }
});
James Zaghini
  • 3,895
  • 4
  • 45
  • 61
Sandhu
  • 21
  • 2