Javascript 动态显示分区取决于另一分区的滚动条位置_Javascript_Jquery_Html

Javascript 动态显示分区取决于另一分区的滚动条位置

javascript jquery html

Javascript 动态显示分区取决于另一分区的滚动条位置,javascript,jquery,html,Javascript,Jquery,Html,我想显示另一个div（#footer）。每当我滚动到div的末尾（#右）时，我都会这样尝试，但不起作用 <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function(){

我想显示另一个

div（#footer）

。每当我滚动到div的末尾（#右）时，我都会这样尝试，但不起作用

  <html>
   <head>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
   <script>
      $(document).ready(function(){
        var bot=$('#right')[0].scrollHeight;
        var pos=$("#right")[0].scrollTop +$("#right")[0].clientHeight;
         if(bot==pos){
        $("#footer").css("display","block");
        }
        else{$("#footer").css("display","none");
        }
       });
    </script>
    <style type="text/css">
      #left{
          width:10px;
          height:100px;
          overflow:hidden;
          background-color:blue;
      }
     #right{
        width:52px;
        height:100px;
        overflow:auto;
        background-color:green;
        position:absolute;
        top:7px;left:20px;
      }
    #footer{
       width:70px;height:50px;
       background-color:yellow;
    }
 </style>
   </head>
   <body>
    <div id="left">
      </div>
      <div id="right">
         a  b  c  d  e  f  g  h  i  j  k  l  m  n  o  p  q  r  s  t  u  v  w  x  y  z 
    </div>
   <div id="footer" style="display:none">
   </div>
  </body>
</html>


$（文档）.ready（函数（）{
var bot=$（'#right'）[0]；
var pos=$（“#右”）[0]。scrollTop+$（“#右”）[0]。clientHeight；
如果（bot==pos）{
$（“#页脚”）.css（“显示”、“块”）；
}
else{$（“#footer”）.css（“display”，“none”）；
}
});
#左{
宽度：10px；
高度：100px；
溢出：隐藏；
背景颜色：蓝色；
}
#对{
宽度：52px；
高度：100px；
溢出：自动；
背景颜色：绿色；
位置：绝对位置；
顶部：7px；左侧：20px；
}
#页脚{
宽度：70像素；高度：50像素；
背景颜色：黄色；
}
a b c d e f g h i j k l m n o p q r s t u v w x y z

查看此链接

对于您的代码，只需将javascript更改为

$(document).ready(function(){
  $('#right').bind('scroll',chk_scroll);
});


function chk_scroll(e)
{
  var elem = $(e.currentTarget);
  if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) 
  {
    $("#footer").show();
  }
}

此处显示

尝试使用overflow属性。我认为第一次加载的脚本只取决于滚动位置，但我希望在移动滚动条时加载脚本，以便实现我的功能。@Gourav你能给我举个例子吗？