浅谈scrollTop属性

最近心血来潮，突然想到鼠标滚动改变背景的效果，思路很明确，通过获取鼠标滚动条距离顶端的位置改变背景。实际操作中却遇到不少问题。
首先，便是针对鼠标滚动对象的选取，其次，百度了之后发现srollTop这个属性在不同的浏览器中存在一定的兼容性的问题：document.documentElement.scrollTop(火狐)，document.body.scrollTop(谷歌),有了兼容性代码后，使用的时候却发现其值一直为零，当时整个人都不好了，代码如下：
      var sTop=document.body.scrollTop;
      window.addEventListener("scroll",function(){
        console.log(sTop);
},false);
查了好久之后才知道哪里gg了，原来当页面加载是，此时已经将此刻高度的0赋值给了sTop，所以一直为0= =！，瞬间觉得自己很弱智。
改正后输出正确效果：
        window.addEventListener("scroll",function(){
         var sTop=document.body.scrollTop;
          console.log(sTop);
     },false);

特此记录下来，以防自己再次蠢哭
总结起来3点：
1.选取合适的添加事件的对象；
2.考虑到浏览器的兼容性问题，这个属性在各大浏览器中都是支持的，只是在获取的时候要考虑到一定的兼容性问题
（ie和Safari已经测过，opera没测）
3.这个属性要注意动态的获取

ps：jq中则需要使用scrollTop()方法：
$("button").click(function(){
alert($("div").scrollTop());
});

 

新手，有不妥之处还请不吝赐教~~

 

转载于:https://www.cnblogs.com/sxcflyhigher/p/6399319.html