首页 > 代码库 > 测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色
测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色
<!doctype html>
<html>
<head>
<title>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</title>
<meta name="author" content="阿耀王子">
</head>
<body>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<p>测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色</p>
<script>
setInterval(function () {
var scrollTop=document.body.scrollTop; //开始值为0
console.log(scrollTop);
// 随滚动条距离顶部的高度不同，显示的背景颜色也是不同的
if(scrollTop < 100){
document.body.style.background = "white";
}else if(scrollTop < 200){
document.body.style.background = "red";
}else if(scrollTop < 300){
document.body.style.background = "orange";
}else if(scrollTop < 400){
document.body.style.background = "yellow";
}else if(scrollTop < 500){
document.body.style.background = "green";
}else if(scrollTop < 600){
document.body.style.background = "cyan";
}else if(scrollTop < 700){
document.body.style.background = "blue";
}else if(scrollTop < 800){
document.body.style.background = "purple";
}else{
document.body.style.background = "black";
}
},600);
</script>
</body>
</html>本文出自 “高万耀” 博客，请务必保留此出处http://gaowanyao.blog.51cto.com/11272977/1947858
测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。