2013-09-27 2 views
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> 
+0

попробуйте использовать свойство переполнения. – Gourav

+0

Я думаю, что сценарий загружается в первый раз, только зависит от положения прокрутки, но я хочу загрузить сценарий, когда когда-либо перемещал полосу прокрутки, чтобы я мог достичь своей функциональности. – Jayababu

+0

@ Гурав вы можете привести мне пример? – Jayababu

ответ

0

Проверить эту ссылку ...

How can I use JQuery to check if a div is scrolled all the way to the bottom?

Для вашего кода просто изменить 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/

Смежные вопросы