offsetTop()和scrollTop()的用法以及与之相关其他方法

最新推荐文章于 2023-01-07 14:44:19 发布

lishundi

最新推荐文章于 2023-01-07 14:44:19 发布

阅读量5.6k

点赞数 3

分类专栏： web

本文链接：https://blog.csdn.net/lishundi/article/details/81558150

版权

web 专栏收录该内容

46 篇文章 1 订阅

订阅专栏

(1)offsetLeft()和offsetTop() :动态计算标签的距离

在页面任一元素的offsetLeft或offsetTop总是跟距离自己最近的有position属性的元素定位，取其left值和top值。如果没有，就根据根节点body定位，然后获取其left值或top值。

无position属性的情况：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #container{
            width:300px;
            height:300px;
            background:#00f;
            margin:30px auto;
            /*position: absolute;*/
        }
        #box{
            width:200px;
            height:200px;
            background:grey;
            margin-left:10px;
        }
    </style>
    <script type="text/javascript">
        function obtainSize(){
            var boxSize=document.getElementById('box');
            console.log(boxSize.offsetLeft);
            console.log(boxSize.offsetTop);
        }
    </script>
</head>
<body>
    <div id="container" >
        <div id="box" onclick="obtainSize()"></div>
    </div>
</body>
</html>

有position属性的情况;

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #container{
            width:300px;
            height:300px;
            background:#00f;
            margin:30px auto;
            position: absolute;
        }
        #box{
            width:200px;
            height:200px;
            background:grey;
            margin-left:10px;
        }
    </style>
    <script type="text/javascript">
        function obtainSize(){
            var boxSize=document.getElementById('box');
            console.log(boxSize.offsetLeft);
            console.log(boxSize.offsetTop);
        }
    </script>
</head>
<body>
<div id="container" >
    <div id="box" onclick="obtainSize()"></div>
</div>
</body>
</html>

（2）offsetWidth()和offsetHeight()(数值类型) 获得元素实际的高度和宽度。（一直到border）例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>offsetTop()和offsetHeight()方法的应用</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 300px;
            padding: 20px;
            border: 4px solid blue;
            margin: 40px auto;
        }
    </style>
    <script>
        window.onload = function () {
            let box = document.getElementById("box");
            let boxWidth = box.offsetWidth;
            let boxHeight = box.offsetHeight;
            console.log(boxWidth);
            console.log(boxHeight);
            //获得的width为348,数值类型,元素内容的宽度(300)+padding+border
            //获得的height为360,数值类型,元素内容的高度(自适应,不写死)+padding+border
        }
    </script>
</head>
<body>
<div id="box">
    UCan下午茶是UCloud于2017年启动的系列技术沙龙。
    该沙龙不仅会分享UCloud最新的技术重点，
    同时也会诚邀业界相关方向的技术大咖一同交流、分享。诚意满满的干货、鲜活生动的案例内容，
    将使每位参与者不负午后时光，场场“悟”有所值。

    2018“UCan下午茶”将会继续秉承技术为先、实践为主的宗旨，
    为大家分享真正的技术干货，同时，相对于2017年，2018 “UCan下午茶”将会增加目前在市场上火热的区块链，
    人工智能等前沿技术方向的探讨和交流，希望能够使您在2018年收获满满，“悟”有所值！

</div>
</body>
</html>

（3）scrollTop()：获得滚动条的位置。

注意：滚动条的位置：已经滚动上去的元素内容的高度。

应用效果：滚动条平缓移动的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 300px;
            height: 200px;
            border: 4px solid blue;
            margin: 20px auto;
            overflow: auto;
        }
      
    </style>
    <script>
        window.onload = function () {
            var box = document.getElementById("box");
            var start = document.getElementById("start");
            var pasue = document.getElementById("pasue");

            start.onclick = function () {
                // 设置定时器

              timer = setInterval(function () {
                     // 获取当前滚动条的位置
                    var old = box.scrollTop;
                    // 改变滚动条的位置：给当前滚动条的位置+10
                    var news = old + 10;
                    // 将新滚动条的位置赋值回去
                    box.scrollTop = news;
                },200)
              
            }
            pasue.onclick = function () {
            clearInterval(timer);
            }

        }
    </script>
</head>
<body>
<input type="button" value="开始阅读" id="start">
<input type="button" value="停止阅读" id="pasue">

<div id="box">
    UCan下午茶是UCloud于2017年启动的系列技术沙龙。
    该沙龙不仅会分享UCloud最新的技术重点，
    同时也会诚邀业界相关方向的技术大咖一同交流、分享。诚意满满的干货、鲜活生动的案例内容，
    将使每位参与者不负午后时光，场场“悟”有所值。

    2018“UCan下午茶”将会继续秉承技术为先、实践为主的宗旨，
    为大家分享真正的技术干货，同时，相对于2017年，2018 “UCan下午茶”将会增加目前在市场上火热的区块链，
    人工智能等前沿技术方向的探讨和交流，希望能够使您在2018年收获满满，“悟”有所值！
    活动主题：从区块链到数字货币安全
    众所周知，链圈和币圈经常纷争不止。但其实两边都是区块链行业繁荣的重要组成部分。
    区块链真正解决的，是数字世界的信任问题，然而，在没有彻底解决诸如安全、性能、
    一致性等一系列问题之前，
    区块链解决信任问题的梦想只能是空中楼阁。
    为此，UCloud将举办UCan下午茶活动，本次沙龙除了重点讲解如何解决区块链安全、
    性能等方面的问题，
    包括区块链多重签名、虚拟货币的安全、如何打造公有链等。
    活动主题：游戏出海，那些弯和那些坑
    随着游戏市场日趋扩大及竞争的日益激烈，虽然如今游戏出海已经过了满地肥肉的时代，
    成为一场拼资源拼实力的硬仗，但很多游戏厂商仍然对出海趋之若鹜，
    毕竟，虽然海外市场，特别 是欧美市场竞争非常惨烈，
    但同时也是一个回报比较高的市场。那么，对于游戏出海来说，
    应该怎样避免走弯路，应该注意哪些坑呢。本次UCan下午茶将会为您解答这些方面的疑问，
    重点探讨游戏出海面临的困难、挑战以及应对的方法和手段，
    同时，也会就一些游戏开发方面的技术问题进行较为深入的交流和讨论。
</div>
</body>
</html>

（4）offsetHeight() 获取滚动条内容的总高度。这个用法较为简单，不再赘述