JS 中 scrollWidth、scrollHeight、scrollLeft 、scrollTop 详解

大家好，又见面了，我是你们的朋友全栈君。

1. 总述

在JS 中scrollWidth、scrollHeight、scrollLeft 、scrollTop 属性在做一些复杂的交互效果中是非常常用的，因此在本博文中详细的介绍并给出实例。
以上的4个属性是成对出现的，因此下面介绍中也成对的介绍，在实例中为了减少代码量，我直接用的id，实际开发中不推荐。

2. scrollWidth和scrollHeight

2.1 概念

element.scrollWidth：返回元素的整体宽度，包括由于溢出而无法展示在网页的不可见部分。
element.scrollHeight ：返回元素的整体高度，包括由于溢出而无法展示在网页的不可见部分。

2.2 实例

在页面中，溢出说得更加通俗一些就是有没有滚动条出现，出现了，说明子元素有一部分被父元素遮挡了，就溢出了，下面给出两个实例，一个没有溢出（没有滚动条），一个溢出了，分别观察他们的scrollWidth和scrollHeight。

2.2.1 未溢出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
    <style> #parent_div{ 
     width: 200px; height: 180px; background: skyblue; overflow: auto; } #children_div{ 
     width: 100px; height: 120px; background:green; color: white; } </style>
</head>
<body>
    <div id="parent_div">
        <div id="children_div">
            this is children
        </div>
    </div>
    <script> console.log(children_div.scrollWidth, children_div.scrollHeight) </script>
</body>
</html>

打印结果为： 100 120 也就是我给出的children的大小。
在这里插入图片描述

2.2.2 溢出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
    <style> #parent_div{ 
     width: 200px; height: 180px; background: skyblue; overflow: auto; } #children_div{ 
     width: 300px; height: 320px; background:green; color: white; } </style>
</head>
<body>
    <div id="parent_div">
        <div id="children_div">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab praesentium consectetur, eligendi odit labore blanditiis repudiandae quam quia, atque eius ipsam suscipit quaerat in dicta. Soluta quasi quam eveniet ex.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus voluptate error fugiat dignissimos doloremque veritatis reiciendis illum hic repudiandae nobis a tempore quae accusamus, ab architecto suscipit assumenda dolorem explicabo.
        </div>
    </div>
    <script> console.log(children_div.scrollWidth, children_div.scrollHeight) </script>
</body>
</html>

打印结果为： 300 320 仍然是我给出的children的大小。
在这里插入图片描述

3. scrollLeft 和scrollTop

3.1 概念

element.scrollLeft ：返回元素左边缘与视图之间的距离，这里的视图指的是元素的内容（包括子元素以及内容）。
element.scrollTop ：返回元素上边缘与视图之间的距离。

我们在页面中经常会用到如图所示的带滚动条的框,我们的QQ消息，微信消息也是这样的呀！
在这里插入图片描述我们需要滑动滚动条来查看完整的视图，这个时候scrollLeft 和scrollTop就出现了，其实实际项目中我们是需要用到client和scroll这两大属性来自动的滑动滚动条，比如来新消息的时候，滚动条自动往下滑动到底部以便查看新消息。这是着重讲scroll，理解清楚了再进行下一步。

scrollLeft的概念是返回元素左边缘与视图之间的距离，我们一步一步的理解，首先，如上图所示，当我们没有滑动水平滚动条时，元素与它的内容默认是左上角顶点重合的，所以他们之间是没有距离的，此刻的
scrollLeft 为 0。
在这里插入图片描述
当我们拉动水平滚动条时，元素与视图就不再是左上角顶点重合了，水平之间是存在距离的（按左上角顶点重合计算),可以看到现在的scrollLef有了数值，因为没有移动垂直滚动条，因此垂直方向仍然是没有距离的。
在这里插入图片描述
当我将水平，垂直滚动条都拉到底部时，scrollLeft 和 scrollTop 都分别为116.8 和156.8 ，我设置的元素宽高分别为：200 180 ，视图（子元素）宽高分别为：300 320 ，如果正常计算的话最大距离应该为： 300-200= 100 以及 320-180 = 140，但结果都增加了16左右，那么因为浏览器计算了滚动条的宽高，具体的代码我会在下面贴出，实际的代码会让你更加清楚的理解这一过程，你可以直接复制然后再浏览器中尝试。

在这里插入图片描述

3.2 实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
    <style> #parent_div{ 
     width: 200px; height: 180px; background: skyblue; overflow: auto; } #children_div{ 
     width: 300px; height: 320px; background:green; color: white; } </style>
</head>
<body>
    <div id="parent_div">
        <div id="children_div">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab praesentium consectetur, eligendi odit labore blanditiis repudiandae quam quia, atque eius ipsam suscipit quaerat in dicta. Soluta quasi quam 
            Lorem ipsum dolor sit amet consectetur, adipisicing elit.
        </div>
    </div>
    <script> parent_div.onscroll = function(){ 
     console.log(parent_div.scrollLeft) console.log(parent_div.scrollTop) } </script>
</body>
</html>