jQuery 使用jQuery检测水平滚动div的结束

Detect end of horizontal scrolling div with jQuery

提问by jmorhardt

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.

所以，我有一些数据被扔到了一个 div 中。它按日期分成块。它使用 jQuery 和鼠标滚轮插件水平滚动。

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:

当 div 到达它的终点（最左边，最右边）时，我需要触发一个事件。我认为通过检测在鼠标滚轮插件中获取的数据，可以通过当前实现的方式来计算何时无法进一步滚动。我只需要朝着正确的方向轻推。这是为我执行水平滚动的代码：

$(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!

有人可以给我一些指导吗？谢谢！

回答by Arman P.

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

嘿，我已经为你准备了一个关于实现的页面。您可以看到如何使用 jQuery 检测滚动区域的末端。

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

对于整个文档，您必须在 javascript 中检测是否.scrollTop已变为等于.scrollHeight. 使用 jQuery 将检测：

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

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

宽度也是如此。看看div这里的例子。

回答by NOTSermsak

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

这是您想要的代码。事实证明，它适用于 IE、Safari、Chrome、Firefox 等。

Here is the HTML part.

这是 HTML 部分。

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

这是 JavaScript 函数中的 jQuery 部分。

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

回答by Sandhu

$('.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')
  }
});