测试scrollTop--随滚动条距离顶部的高度body显示不同的颜色

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了测试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显示不同的颜色的主要内容，如果未能解决你的问题，请参考以下文章

滚动条事件

scrollTop总是为0

js如何获取滚动条的高度

js里clientHeight，scrolltop这些指的是从哪里到哪里的距离啊？

jquery 让DIV相当于body定位，然后随滚动条向下滚动

jsz中scrollTop,clientTop,offsetTop