页面滑到底部弹出提示框

原理:页面滚动高度+可视区域高度=页面内容高度时 显示提示框

<script>
           
            var bodyHeight=document.documentElement.clientHeight||document.body.clientHeight;//页面屏幕高度
            var pageHeight=document.body.scrollHeight ;//页面内容高度
            var scrollHeight=0;//页面滚动的高度
            var bodys=document.querySelector("body");//获取body
            var mask=document.querySelector(".mask");//获取遮罩元素
            console.log(pageHeight)
            bodys.onscroll=function(){
                var scrollHeight=document.documentElement.scrollTop||document.body.scrollTop;                
                //页面滚动高度+可视区域高度=页面高度时 弹出提示框 
                if(scrollHeight+bodyHeight>=pageHeight){
                    mask.style.display="block"
                }
            }
            
            
        </script>

 

posted @ 2018-12-05 10:59  雪旭  阅读(948)  评论(0编辑  收藏  举报