zoukankan      html  css  js  c++  java
  • 浅谈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());
    });

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

  • 相关阅读:
    linux自动获得mac地址,修改网络配置
    Linux上java环境变量配置
    linux下rz,sz安装
    linux环境变量设置
    cenos6.5安装vsftp
    tomcat打开gzip、配置utf-8
    java基础50 配置文件类(Properties)
    java基础49 IO流技术(对象输入流/对象输出流)
    java基础48 IO流技术(序列流)
    java基础47 装饰着模式设计
  • 原文地址:https://www.cnblogs.com/sxcflyhigher/p/6399319.html
Copyright © 2011-2022 走看看