Можно ли использовать событие прокрутки для div?

Я запускаю событие прокрутки в div. Это не срабатывает.Можно ли использовать событие прокрутки для div?

Мой сценарий:

Когда прокрутки вниз нижней хотите, чтобы предупредить пользователя. Я делюсь образцом кода.

<div class="screen"> 
    <div class="main_wrap" id="Main"> 
     <div class="sub-wrap"> 
      <div class="title"> 
      </div> 
      <div class="desc"> 
      </div> 
     </div> 
<div class="sub-wrap"> 
      <div class="title"> 
      </div> 
      <div class="desc"> 
      </div> 
     </div> 
<div class="sub-wrap"> 
      <div class="title"> 
      </div> 
      <div class="desc"> 
      </div> 
     </div> <div class="sub-wrap"> 
      <div class="title"> 
      </div> 
      <div class="desc"> 
      </div> 
     </div> <div class="sub-wrap"> 
      <div class="title"> 
      </div> 
      <div class="desc"> 
      </div> 
     </div> 
<div class="sub-wrap"> 
      <div class="title"> 
      </div> 
      <div class="desc"> 
      </div> 
     </div> 
    </div> 
</div>

Я пробовал вот так.

$('#Main').bind('scroll', function() { 
     if ($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) { 
      ajaxPost.GetCommunityInfoList(); 
     } 
    });

Предложите мне идеи. Спасибо заранее

источник

2016-05-10 user5109490

Его HTML, где js? – Jai

чек с этим ниже код может помочь вам ....

$('.screen').bind('scroll', function(){ 
 
    if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight) 
 
    { 
 
    alert('end reached'); 
 
    } 
 
});

.screen{ 
 
    height : 400px; 
 
    background : black; 
 
    overflow-y: scroll; 
 
} 
 
#Main{ 
 
    height : 600px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="screen"> 
 
    <div class="main_wrap" id="Main"> 
 
    <div class="sub-wrap"> 
 
     <div class="title"> 
 
     </div> 
 
     <div class="desc"> 
 
     </div> 
 
    </div> 
 
    <div class="sub-wrap"> 
 
     <div class="title"> 
 
     </div> 
 
     <div class="desc"> 
 
     </div> 
 
    </div> 
 
    <div class="sub-wrap"> 
 
     <div class="title"> 
 
     </div> 
 
     <div class="desc"> 
 
     </div> 
 
    </div> <div class="sub-wrap"> 
 
    <div class="title"> 
 
    </div> 
 
    <div class="desc"> 
 
    </div> 
 
    </div> <div class="sub-wrap"> 
 
    <div class="title"> 
 
    </div> 
 
    <div class="desc"> 
 
    </div> 
 
    </div> 
 
    <div class="sub-wrap"> 
 
     <div class="title"> 
 
     </div> 
 
     <div class="desc"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

источник

2016-05-10 05:21:54

Да вы можете сделать это. Рассмотрим мой пример

обработчик событий прокрутки может быть привязан к этому элементу:

$("#target").scroll(function() { 
$("#log").append("<div>Handler for .scroll() called.</div>"); 
});

Теперь, когда пользователь прокручивает текст вверх или вниз, один или несколько сообщений добавляются: Обработчик для вызова .scroll(). Чтобы инициировать событие вручную, применять .scroll() без аргументов

$("#other").click(function() { 
$("#target").scroll(); 
});

После выполнения этого кода, нажатие на Trigger обработчик будет также добавить сообщение.

Событие прокрутки отправляется всякий раз, когда изменяется положение прокрутки элемента, независимо от причины. Щелчок мышью или перетаскивание на полосе прокрутки, перетаскивание внутри элемента, нажатие клавиш со стрелками или использование колесика прокрутки мыши могут вызвать это событие.

источник

2016-05-10 05:23:40

Вы можете попробовать что-то вроде этого:

function div_scroll(e) { var mydiv = $(e.currentTarget); 
    if(mydiv[0].scrollHeight - mydiv.scrollTop() == mydiv.outerHeight()) 
alert('at bottom'); 
    } 

    $(function() { $('#main').bind('scroll', div_scroll); });

источник

2016-05-10 05:23:47 sumitmann

Вы можете просто использовать .scroll() и .scrollTop для этого

Проверьте это JSFiddle

$(window).scroll(function() { 
 
    if ($(window).scrollTop() + $(window).height() == $(document).height()) { 
 
    alert("bottom!"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="screen"> 
 
    <div class="main_wrap" id="Main"> 
 
    <div class="sub-wrap"> 
 
     <div class="title"> 
 
     Lorem ipsum dolor sit amet 
 
     </div> 
 
     <div class="desc"> 
 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque fringilla vel, 
 
     </div> 
 
    </div> 
 
    <div class="sub-wrap"> 
 
     <div class="title"> 
 
     Lorem ipsum dolor sit amet 
 
     </div> 
 
     <div class="desc"> 
 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque fringilla vel, 
 
     </div> 
 
    </div> 
 
    <div class="sub-wrap"> 
 
     <div class="title"> 
 
     Lorem ipsum dolor sit amet 
 
     </div> 
 
     <div class="desc"> 
 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque fringilla vel, 
 
     </div> 
 
    </div> 
 
    <div class="sub-wrap"> 
 
     <div class="title"> 
 
     Lorem ipsum dolor sit amet 
 
     </div> 
 
     <div class="desc"> 
 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque fringilla vel, 
 
     </div> 
 
    </div> 
 
    <div class="sub-wrap"> 
 
     <div class="title"> 
 
     Lorem ipsum dolor sit amet 
 
     </div> 
 
     <div class="desc"> 
 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque fringilla vel, 
 
     </div> 
 
    </div> 
 
    <div class="sub-wrap"> 
 
     <div class="title"> 
 
     Lorem ipsum dolor sit amet 
 
     </div> 
 
     <div class="desc"> 
 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque fringilla vel, 
 
     </div> 
 
    </div> 
 
    <div class="sub-wrap"> 
 
     <div class="title"> 
 
     Lorem ipsum dolor sit amet 
 
     </div> 
 
     <div class="desc"> 
 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque fringilla vel, 
 
     </div> 
 
    </div> 
 
    <div class="sub-wrap"> 
 
     <div class="title"> 
 
     Lorem ipsum dolor sit amet 
 
     </div> 
 
     <div class="desc"> 
 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque fringilla vel, 
 
     </div> 
 
    </div> 
 
    <div class="sub-wrap"> 
 
     <div class="title"> 
 
     Lorem ipsum dolor sit amet 
 
     </div> 
 
     <div class="desc"> 
 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque fringilla vel, 
 
     </div> 
 
    </div> 
 
    <div class="sub-wrap"> 
 
     <div class="title"> 
 
     Lorem ipsum dolor sit amet 
 
     </div> 
 
     <div class="desc"> 
 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque fringilla vel, 
 
     </div> 
 
    </div> 
 
    <div class="sub-wrap"> 
 
     <div class="title"> 
 
     Lorem ipsum dolor sit amet 
 
     </div> 
 
     <div class="desc"> 
 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque fringilla vel, 
 
     </div> 
 
    </div> 
 
    <div class="sub-wrap"> 
 
     <div class="title"> 
 
     Lorem ipsum dolor sit amet 
 
     </div> 
 
     <div class="desc"> 
 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque fringilla vel, 
 
     </div> 
 
    </div> 
 
    <div class="sub-wrap"> 
 
     <div class="title"> 
 
     Lorem ipsum dolor sit amet 
 
     </div> 
 
     <div class="desc"> 
 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque fringilla vel, 
 
     </div> 
 
    </div> 
 
    <div class="sub-wrap"> 
 
     <div class="title"> 
 
     Lorem ipsum dolor sit amet 
 
     </div> 
 
     <div class="desc"> 
 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque fringilla vel, 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

источник

2016-05-10 05:32:23

Можно ли использовать событие прокрутки для div?

ответ

Смежные вопросы