0
点赞
收藏
分享

微信扫一扫

js 监听页面滚动到底部

Gaaidou 2021-09-24 阅读 120

直接上代码两种写法
1、jquery

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #contain{
            border: 1px solid pink;
            width: 100%;
            height: 300px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div id="contain">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
。。。。。。。。。。。。。。。。
            <li>198</li>
            <li>199</li>
            <li>200</li>
        </ul>
    </div>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    scrollBottomTest =function(){
     $("#contain").scroll(function(){
         var $this =$(this),
         viewH =$this.height(),//可见高度   $("#contain")[0].clientHeight
         contentH =$this.get(0).scrollHeight,//内容高度   
         scrollTop =$this.scrollTop();//滚动高度 
        //if(contentH - viewH - scrollTop <= 100) { //到达底部100px时,加载新内容
        if(scrollTop/(contentH -viewH)>=0.95){ //到达底部100px时,加载新内容
            console.log('现在百分比是: ', scrollTop/(contentH -viewH))
        }
     });
    }
    scrollBottomTest()
</script>
</body>
</html>

2、原生写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #contain{
            border: 1px solid pink;
            width: 100%;
            height: 300px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div id="contain">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
。。。。。。。。。。。。。。。。
            <li>198</li>
            <li>199</li>
            <li>200</li>
        </ul>
    </div>
<script type="text/javascript">
    var _this = document.querySelector('#contain');
    _this.addEventListener('scroll' , function(){
         viewH = _this.clientHeight
         contentH =_this.scrollHeight,//内容高度
         scrollTop =_this.scrollTop;
        //if(contentH - viewH - scrollTop <= 100) { //到达底部100px时,加载新内容
        if(scrollTop/(contentH -viewH)>=0.95){ //到达底部100px时,加载新内容
            console.log('现在百分比是: ', scrollTop/(contentH -viewH))
        }
    })  
</script>
</body>
</html>

举报

相关推荐

0 条评论