你怎么知道滚动条已到达页面的底部 [英] How do you know the scroll bar has reached bottom of a page

问题描述

我有一个HTML页面，当滚动条到达页面底部时，我需要从包含iframe的右下角的div中滑动。

使用JQuery我已经实现了包含iframe的div的滑动效果。目前滑动是通过点击按钮完成的（在按钮点击事件上）。我怎么能改变这一点，以便当滚动条到达底部时，包含iframe的div自动滑入。

我的HTML页面代码是

 < style> 
 .slide {
 background-color：#FFFFCC; 
 border：1px solid＃999999; 
 height：900px; 
保证金：1em 0; 
 overflow：hidden; 
职位：亲属; 
宽度：100％; 
} 
 .slide .inner {
 background：＃44CC55; 
 bottom：0; 
 / * height：650px; * / 
 height：auto; 
剩下：0; 
 padding：6px; 
位置：绝对; 
 width：650px; 
 border：1px纯红色; 
} 
< / style> 
 
< link href =http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css =stylesheettype =文本/ 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 =slidemarginleftclass =slide> 
<按钮>滑动< /按钮> 
< div class =innerstyle =margin-left：1300px;>< iframe width =600scrolling =noheight =600frameborder =0src = http://google.com> 
< / iframe>< / div> 
< / div> 
  

解决方案

您将使用jquery中的滚动功能来检查该位置是否已达到document.height或window.height值。
有些东西（我还没有验证过）

$ $ $ $ $ $ $（window）.scroll（function （）{
console.log（$（window）.scrollTop（）==（$（document）.height（） - $（window）.height（）））;
}）

I have a HTML page, when the scroll bar reaches bottom of the page I need to slide in a div from bottom-right containing an iframe.

Using JQuery I have implemented the sliding effect for the div containing the iframe. At present the sliding is done by clicking a button(on button click event). How could I change this, so that when the scroll bar reaches bottom the div containing the iframe automatically slides in.

My HTML page code is

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

解决方案

You would to use the scroll function in jquery to check the position if it has reached document.height or window.height values. Something along the lines of this (I haven't verified it)

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

这篇关于你怎么知道滚动条已到达页面的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！