用JS基础写一个简单的滚动条事件

JS基础写出的滚动条事件

羽行

2907人浏览 · 2021-12-27 00:39:30

羽行 · 2021-12-27 00:39:30 发布

滚动条事件，顾名思义，就是创建一个可以一直下拉的滚动条。
用的场景多用于商品的推荐。
首先要在CSS里创建一个高度(相关的也可以)

	<style>
        body{
            padding-bottom: 2000px;
        }
    </style>

然后创建相关的条件：

	  var nbody = document.body
      var at = 500;
   	  var i = 2000;

判断：

 window.onscroll = function(epic){
       var pageHeight = document.documentElement.scrollHeight;
       var stop = document.documentElement.scrollTop; 
       var seeHeight = document.documentElement.clientHeight;
       var result = pageHeight-stop-seeHeight;
    if(result<200){
        i+=at;
        nbody.style.paddingBottom= i+"px"
    }
       
       console.log('网页高'+pageHeight)
       console.log('当前'+stop)
       console.log('可视高'+seeHeight)
       console.log('距离底部'+result)
       console.log('--------');
    }

接下来是思路：
因为要到一定的高度才会有下拉框所以要先定义paddingbottom的高为2000px，这样的话就有一个大的框架了，接下来在捕获页面的总高度和被卷去的高度（从顶部到当前的距离）还有页面的可视高度，最后用高度-距离-可视高=页面距离底部的距离，在用if进行判断，当到达某个值的时候，进行增加并将他赋予给页面的高度，然后一直进行判断，就可以完成一个简易的滚动条事件了。

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    body{
        padding-bottom: 2000px;
    }
</style>
</head>
<body>
    <script>
         var nbody = document.body
     var at = 500;
       var i = 2000;
             window.onscroll = function(epic){
       var pageHeight = document.documentElement.scrollHeight;
       var stop = document.documentElement.scrollTop; 
       var seeHeight = document.documentElement.clientHeight;
            //    var body = document.body;
         var result = pageHeight-stop-seeHeight;
    if(result<200){
        i+=at;
        nbody.style.paddingBottom= i+"px"
    }
       
       console.log('网页高'+pageHeight)
       console.log('当前'+stop)
       console.log('可视高'+seeHeight)
       console.log('距离底部'+result)
       console.log('--------');
    }
</script>
</body>
</html>