Определить конец горизонтальной прокрутки div с помощью jQuery - PullRequest
Новая
       10

Определить конец горизонтальной прокрутки div с помощью jQuery

4 голосов
/ 12 мая 2011

Итак, у меня есть некоторые данные, брошенные в div.Это разбито на куски по дате.Он прокручивается горизонтально с использованием jQuery и плагина mousewheel.

Мне нужно вызвать событие, когда div достигнет своей конечной точки (крайний левый, крайний правый)Я думаю, что это возможно в том виде, в котором он реализован в настоящее время, чтобы вычислять, когда вы не можете прокрутить дальше, обнаруживая данные, извлеченные в плагине mousewheel.Мне просто нужно подтолкнуть в правильном направлении.Вот код, который выполняет горизонтальную прокрутку для меня: 

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

Кто-нибудь может дать мне какое-то направление?Спасибо!

Ответы [ 3 ]

8 голосов
/ 12 мая 2011

Эй, я подготовил для вас страницу с реализацией.Вы можете увидеть, как определить конец области прокрутки с помощью jQuery.

Для документа в целом вы должны определить в javascript, стало ли .scrollTop равным .scrollHeight.С jQuery было бы обнаружить: 

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

То же самое сделано для ширины.Посмотрите на пример с div здесь .

4 голосов
/ 20 февраля 2013

Вот код, который вы хотите.Доказано, что работает в IE, Safari, Chrome, Firefox и т. Д.

Вот часть 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>

Вот часть jQuery в функциях JavaScript.

0 голосов
/ 27 октября 2016 
$('.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')
  }
});
...