⽤JS基础写⼀个简单的滚动条事件
滚动条事件，顾名思义，就是创建⼀个可以⼀直下拉的滚动条。
⽤的场景多⽤于商品的推荐。
⾸先要在CSS⾥创建⼀个⾼度(相关的也可以)
<style>
body{
padding-bottom: 2000px;
}
</style>
然后创建相关的条件：
var nbody = document.body
var at = 500;
var i = 2000;
判断：
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;
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>
js控制滚动条</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论