如何知道滚动条已经到达页面底部？（关于IT技术）

Question

如何知道滚动条已经到达页面底部？（关于IT技术）

16

我有一个HTML页面，当滚动条到达页面底部时，我需要从右下角滑入一个包含iframe的div。使用jQuery，我已经实现了包含iframe的div的滑动效果。目前，通过点击按钮（在按钮单击事件中）来完成滑动。我该如何更改这个功能，使得当滚动条到达底部时，包含iframe的div可以自动滑入？我的HTML页面代码如下：

<style>
  .slide {
      background-color: #FFFFCC;
      border: 1px solid #999999;
      height: 900px;
      margin: 1em 0;
      overflow: hidden;
      position: relative;
      width: 100%;
    }
  .slide .inner {
      background: #44CC55;
      bottom: 0;
      /*height: 650px;*/
      height: auto;
      left: 0;
      padding: 6px;
      position: absolute;
      width: 650px;
      border: 1px solid red;
   }
</style>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
   $(document).ready(function(){

     $('#slidemarginleft button').click(function(){
       var $marginLefty = $(this).next();
       $marginLefty.animate({
        marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 1300 ? 655 : 1300
        });
     });
   });

 </script>

 <div id="slidemarginleft" class="slide">
   <button>slide it</button>
   <div class="inner" style="margin-left: 1300px;"><iframe width="600" scrolling="no" height="600" frameborder="0" src="http://google.com">
                                                                    </iframe></div>
 </div>

- Amal Kumar S

4个回答

3

$(window).scroll(function(){ // each time the scroll event is triggered
    if($(window).scrollTop() + screen.height > $('body').height()) {
        // if scroll has reached the bottom, execute this 
    }
};

- Srijan Gupta

1

if (document.documentElement.clientHeight + 
    $(document).scrollTop() >= document.body.offsetHeight )
{ 
    // Display alert or whatever you want to do when you're 
    //   at the bottom of the page. 
    alert("You're at the bottom of the page.");
}

- Kugutsumen

1

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>JQuery | Detecting when user scrolls to bottom of div. 
    </title> 
</head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> 

<body style="text-align:center;" id="body"> 
    <h1 style="color:green;">  
            Data Center  
        </h1> 
    <p id="data_center" style="font-size: 17px; font-weight: bold;"></p> 
    <center> 
        <div class="div" style="width:200px; height:150px; overflow:auto;"> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
            <h1>Hello Friends</h1> 
        </div> 
    </center> 
    <script> 
        $('#data_center').text('Scroll till bottom to get alert!'); 
        jQuery(function($) { 
            $('.div').on('scroll', function() { 
                if ($(this).scrollTop() + $(this).innerHeight() >=  $(this)[0].scrollHeight) {                     
                    alert('End of DIV has reached!'); 
                } 
            }); 
        }); 
    </script> 
</body> 

</html>

这对我有效。享受代码 :)

- Kamlesh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- prasanna · Accepted Answer

你需要在jQuery中使用scroll函数来检查位置是否已达到document.height或window.height的值。类似这样的代码（我没有验证过）：

$(window).scroll(function(){ 
   console.log($(window).scrollTop() == ($(document).height() - $(window).height()));
})