js中的scroll和offset 使用比较的实例与分析


Posted in Javascript onSeptember 29, 2013

1.offsetTop     :
当前对象到其上级层顶部的距离.
不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.

2.offsetLeft    :
当前对象到其上级层左边的距离.
不能对其进行赋值.设置对象到页面左部的距离请用style.left属性.

3.offsetWidth   :
当前对象的宽度.
与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值

4.offsetHeight :
与style.height属性的区别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值

5.offsetParent  :
当前对象的上级层对象.
注意.如果对象是包括在一个DIV中时,此DIV不会被当做是此对象的上级层,(即对象的上级层会跳过DIV对象)上级层是Table时则不会有问题.
利用这个属性,可以得到当前对象在不同大小的页面中的绝对位置.

6.scrollLeft    :
对象的最左边到对象在当前窗口显示的范围内的左边的距离.
即是在出现了横向滚动条的情况下,滚动条拉动的距离.

7.scrollTop
对象的最顶部到对象在当前窗口显示的范围内的顶边的距离.
即是在出现了纵向滚动条的情况下,滚动条拉动的距离.

 

【代码】测试offsetTop和scrollTop的html代码

<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="content-type"/>

<script type="text/javascript">
    function test1(){
          var div = document.getElementById("div1");
          document.getElementById("li1").innerHTML = (div.offsetTop)+"px";//div1距离屏幕顶部的距离
          document.getElementById("li2").innerHTML = (div.offsetLeft)+"px";//div1距离屏幕左部的距离
          document.getElementById("li3").innerHTML = (div.scrollTop)+"px";//div1纵向滚动条滚动的距离
          document.getElementById("li4").innerHTML = (div.scrollLeft)+"px";//div1横向滚动条滚动的距离
     }
      function test2(){
          var div = document.getElementById("div2");
          document.getElementById("li5").innerHTML = (div.offsetTop)+"px";//div2距离屏幕顶部的距离
          document.getElementById("li6").innerHTML = (div.offsetLeft)+"px";//div2距离屏幕左部的距离
          document.getElementById("li7").innerHTML = (div.scrollTop)+"px";//div2纵向滚动条滚动的距离
          document.getElementById("li8").innerHTML = (div.scrollLeft)+"px";//div2横向滚动条滚动的距离
     }
     function test3(){
          var div = document.getElementById("div3");
          document.getElementById("li9").innerHTML = (div.offsetTop)+"px";//div3距离屏幕顶部的距离
          document.getElementById("li10").innerHTML = (div.offsetLeft)+"px";//div3距离屏幕左部的距离
          document.getElementById("li11").innerHTML = (div.scrollTop)+"px";//div3纵向滚动条滚动的距离
          document.getElementById("li12").innerHTML = (div.scrollLeft)+"px";//div3横向滚动条滚动的距离
     }
</script>
</head>
<body style="border: 10px solid red;padding:0px 0px;margin:5px 10px">
    <div>
    <DIV style="width:70%;border-right:1px dashed red;float:left;">
        <div style="float:left;">
            <div id="div1" style="border:5px blue solid;height:400px;width:200px;overflow:auto">
                <div style="height: 500px;width:400px">this is test!</div>
            </div>
            <input type="button" value="CLICK 1" onclick="test1()" style="border: 1px solid purple;height: 25px;"/>
        </div>
        <div>
            <div id="div2" style="border:5px solid yellow;height:400px;width:200px;overflow:auto">
                <div style="height: 500px;width:400px">this is test!</div>
            </div>
            <input type="button" value="CLICK 2" onclick="test2()"style="border: 1px solid purple;height: 25px;"/>
        </div>
        <div style="clear: both;">
            <div id="div3" style="border:5px solid #0080C0;height:400px;width:200px;overflow:auto;clear:both;">
                <div style="height: 500px;width:400px">this is test!</div>
            </div>
            <input type="button" value="CLICK 3" onclick="test3()"style="border: 1px solid purple;height: 25px;"/>
        </div>
    </DIV>
    <DIV style="width: 20%;float:right;margin-right:100px">
        <ul>click1结果:
            <li id="li1"></li>
            <li id="li2"></li>
            <li id="li3"></li>
            <li id="li4"></li>
        </ul>
        <ul>click2结果:
            <li id="li5"></li>
            <li id="li6"></li>
            <li id="li7"></li>
            <li id="li8"></li>
        </ul>
        <ul>click3结果:
            <li id="li9"></li>
            <li id="li10"></li>
            <li id="li11"></li>
            <li id="li12"></li>
        </ul>
    </DIV>
    </div>
</body>
</html>

上面就是自己测试用的代码,可以直接拿来测试。
Javascript 相关文章推荐
不能再简单的无闪刷新验证码原理很简单
Nov 05 Javascript
各种效果的jquery ui(接口)介绍
Sep 17 Javascript
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
Apr 06 Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 Javascript
javascript获取select标签选中的值
Jun 04 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 Javascript
详解ES6之async+await 同步/异步方案
Sep 19 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
Aug 01 Javascript
Vue前端判断数据对象是否为空的实例
Sep 02 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 #Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
Sep 29 #Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 #Javascript
jquery事件与函数的使用介绍
Sep 29 #Javascript
Jquery选中或取消radio示例
Sep 29 #Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
Sep 29 #Javascript
目前流行的JavaScript库的介绍及对比
Sep 29 #Javascript
You might like
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
基于mysql的论坛(5)
2006/10/09 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
laravel unique验证、确认密码confirmed验证以及密码修改验证的方法
2019/10/16 PHP
js异或加解密效果代码
2008/06/25 Javascript
判断控件是否已加载完成的代码
2010/02/24 Javascript
JQuery 选择和过滤方法代码总结
2010/11/19 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
2015/09/18 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
jQuery Migrate 插件用法实例详解
2019/05/22 jQuery
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
python中元类用法实例
2014/10/10 Python
Python连接DB2数据库
2016/08/27 Python
python2 与python3的print区别小结
2018/01/16 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
python实现动态数组的示例代码
2019/07/15 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
Python 使用双重循环打印图形菱形操作
2020/08/09 Python
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
新学期家长寄语
2014/01/19 职场文书
新闻编辑求职信
2014/04/09 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书
python 模块重载的五种方法
2021/04/24 Python