1. 首頁
  2. 問答
  3. 我們可以使用div的滾動事件嗎？

我們可以使用div的滾動事件嗎？

2016-05-10 88 views
0

我觸發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

+0

它的HTML在哪裏是js？ – Jai

回答

0

檢查與此下面的代碼，它可以幫助你....

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

0

是的，你可以做到這一點。考慮我的例子

Trigger the handler

滾動事件處理程序可以綁定到這個元素：當用戶滾動文本向上或向下，一個或多個消息被附加到

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

現在： 調用.scroll（）的處理程序。 要手動觸發事件，應用.scroll（）不帶參數

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

這個代碼執行後，點擊觸發的處理程序也將附加消息。

無論原因如何，只要元素的滾動位置發生變化就會發送滾動事件。鼠標在滾動條上單擊或拖動，在元素內部拖動，按箭頭鍵或使用鼠標的滾輪可能會導致此事件。

來源

2016-05-10 05:23:40

0

你可以嘗試這樣的事情：

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

0

您可以簡單地使用.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

相關問題

 相關問題