Question

当您进入页面底部时，我希望滚动条隐藏。我写了这段代码，效果很好：

<script>
document.onscroll = function() {
        if (window.innerHeight + window.scrollY > document.body.clientHeight) {
            document.getElementById("scroller").style.display='hide';
        }


    }
</script>

但是现在当您回到顶部时，滚动条也被隐藏了。

当用户返回顶部时，我想再次显示#scroller。

Answer 1

只需添加一个显示它的else case：

if (window.innerHeight + window.scrollY > document.body.clientHeight) {
     document.getElementById("scroller").style.display='none';
}
else{
     document.getElementById("scroller").style.display='block';
}

Answer 2

<script>
    document.onscroll = function() {
        if (window.innerHeight + window.scrollY > document.body.clientHeight) {
            document.getElementById("scroller").style.display='hide';
        } else {
            document.getElementById("scroller").style.display='block';
        }
    }
</script>

Answer 3

$(document).ready(function(){
$("div").scroll(function(){
        if($("div").scrollTop()==0)
            $("scroller").show();   
        else
               $("scroller").hide(); 
});

}）;

您可以在JQuery中使用它。

Answer 4

尝试关注

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       $('#scroller').hide('slow');
   } 
   else if($(window).scrollTop()==0)
   {
          $('#scroller').show('slow');
   }
});

滚动到底部时如何隐藏div并滚动到顶部时再次显示它？

4 个答案: