1

もう一つお見せしたいと思いdiv(#footer)ます。div(#right) の最後までスクロールするたびに、このように試してみましたが、機能していません。

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

1 に答える 1

0

このリンクをチェックしてください...

JQuery を使用して、div が一番下までスクロールされているかどうかを確認するにはどうすればよいですか?

あなたのコードでは、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();
  }
}

ここに表示

http://jsfiddle.net/rsP9p/

于 2013-09-27T15:34:58.823 に答える