滚动大小（scroll dimension）

滚动大小指的是包含滚动内容元素的大小。

以下是与元素滚动内容大小相关的属性：

1. scrollWidth：在没有滚动条的情况下，元素内容的总宽度。

2. scrollHeight：在没有滚动条的情况下，元素内容的总高度。

3. scrollTop：被隐藏在内容区域左侧的像素数。设置该值可以改变元素的滚动位置。

4. scrollLeft：被隐藏在内容区域上方的像素数。设置该值可以改变元素的滚动位置。

接下来就举例讲解一下各个属性是什么意思，在这里使用html元素最为观察元素，因为，通常认为<html>元素是在web浏览器的视口中滚动的元素（IE6之前版本运行在混杂模式下是<body>元素），因为该元素即使没有任何执行代码也能自动地添加滚动条，其他元素需要通过css设置overflow属性，才会出现滚动条。

案例代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .container {

            height: 1200px;

        }

        .container div {

            height: 400px;

            width: 150%;

            font-size: 20px;

            font-weight: bold;

            text-align: right;

        }

        div.red {

            background-color: red;

        }

        div.green {

            background-color: green;

        }

        div.yellow {

            background-color: yellow;

        }

        div.black {

            background-color: black;

        }

        .print {

            position: fixed;

            top: 10px;

            left: 10px;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="red">最右边</div>

        <div class="green">最右边</div>

        <div class="yellow">最右边</div>

    </div>

    <div class="print">

        <button>

            打印相关属性值

        </button>

        <div></div>

    </div>

    <script>

        var _body = document.documentElement;

        var btn = document.querySelector('.print button');

        var text = document.querySelector('.print div');

        btn.onclick = function () {

            var html = "";

            var ch = _body.clientHeight;

            var cw = _body.clientWidth;

            var sh = _body.scrollHeight;

            var sw = _body.scrollWidth;

            var st = _body.scrollTop;

            var sl = _body.scrollLeft;

            html += "clientHeight:" + ch + "<br>";

            html += "clientWidht:" + cw + "<br>";

            html += "scrollHeight:" + sh + "<br>";

            html += "scrollWidth:" + sw + "<br>";

            html += "scrollTop:" + st + "<br>";

            html += "scrollLeft:" + sl + "<br>";

            text.innerHTML = html;

        }

    </script>

</body>

</html>

页面第一次加载完之后，我们点击按钮得到相关属性值如下：

现在我们往上，往左滚动一下，在看一下结果：

发现只有scrollTop和scrollLeft发生了一定的改变，其他四个属性没有发生改变（并不是说这四个属性不会改变，在不操作滚动内容和调整窗口大小的情况下，是不会发生改变的，我们的案例就是在此基础上进行的）。

现在我们在来看一下滚动到最底部的时候，结果又是怎么样的：

发现，变化的还是scrollTop和scrollLeft（基于上次位置，不左滚动的话scrollLeft是不会变的，我是向左滚动了的，以此避免认为向上滚动scroolleft的值会改变），

但是仔细一看会发现一组非常有意思的数据，即 clientHeight + scrollTop = scrollHeight;

在看一下左滚动到最右边，会有什么变化：

此时我们发现 clientWidth + scrollLeft = scrollWidth;

到此我们发现了这样一个规律，就是元素中的滚动内容滚动到边界的时候，就会有下面一个或者两个等式成立：

1.  clientWidth + scrollLeft = scrollWidth;

2. clientHeight + scrollTop = scrollHeight;

其实仔细一想也很好理解，比如元素中的滚动内容滚动到最底部的时候，就无法继续滚动，那么此时内容在元素中的可见高度就是元素的clientHeight，而此时的scrollTop就是元素超出元素上方的距离，这两个值相加就一定会等于元素的scrollHeight，另一个等式同理。

有了这个等式的成立，那么我们就可以做很多事情，比如下拉加载，自定义滚动条等等，同时通过scrollTop的值的设置，我们还可以实现回到顶部的功能。

以上我们介绍的是在有滚动条的情况下，出现的一种现象，那在没有滚动条的情况下又会是一个什么样子了？（前提还是把html元素作为观察对象）。

其实在不包含滚动条的页面，scrollWidth和scrollHeight与clientWidth和clientHeight之间的关系不十分清晰，不同浏览器之间存在着差异。

1. FireFox 中这两组属性大小相等，但大小代表的是文档内容区域的实际尺寸，而非视口的尺寸（未经测试，查阅资料得知）

2. Safari中clientWidht和scrollWidth相等等于视口宽度，clientHeight等于视口的高度，scrollHeight等于文档内容区域的高度（Safari版本12.1.2）

3. chrome中这两组属性相等，等于视口大小（chrome版本 79.0.3945.130（正式版本） （64 位）mac）

4. IE（在标准模式下）中的两组属性不相等，其中scrollWidth和scollHeight等于文档内容区域的大小，另一组属性等于视口的大小。（未经测试，查阅资料得知）

所以有了这些差异，所以我们确定文档的总高度和宽度的时候，必须取得scrollWIdth/clientWidht和scrollHeihgt/clientHeight中的最大值，才能保证在跨浏览器环境中得到精确的结果，现给下兼容写法：

function getDoc() {

            // 混杂模式

            if (document.compatMode !== 'BackCompat') {

                return {

                    height: Math.max(document.body.scrollHeight, document.body.clientHeight),

                    width: Math.max(document.body.scrollWidth, document.body.clientHeight)

                }

            }

            else {

                return {

                    height: Math.max(document.documentElement.scrollHeight, document.body.clientHeight),

                    width: Math.max(document.documentElement.scrollWidth, document.body.clientHeight)

                }

            }

        };

关于滚动元素大小的知识点介绍完毕，如果有错就告知一声，我好及时修改。

一文看懂js中元素的滚动大小（scrollWidth,scrollHeight,scrollTop,scrollLeft）的更多相关文章

  1. 一文看懂js中元素的客户区大小（clientWidth,clientHeight）

    元素的客户区 元素的客户区大小,指的是元素内容及其内边距所占据的空间大小. 相关属性如下: 1. clientWidth:元素内容区宽度+元素左右内边距 2. clientHeight:元素内容区高度 ...

  2. 一文看懂js中元素偏移量（offsetLeft,offsetTop,offsetWidth,offsetHeight）

    偏移量(offset dimension) 偏移量:包括元素在屏幕上占用的所有可见空间,元素的可见大小有其高度,宽度决定,包括所有内边距,滚动条和边框大小(注意,不包括外边距). 以下4个属性可以获取 ...

  3. 一文看懂js中的clientX，clientY，pageX，pageY，screenX，screenY

    一. 客户区坐标位置(clientX,clientY) 鼠标事件都是在浏览器视口中的特定位置发生的.这个位置信息保存在事件对象的clientX和clientY属性中,所有浏览器都支持这两个属性. 我们 ...

  4. 一文搞懂 js 中的各种 for 循环的不同之处

    一文搞懂 js 中的各种 for 循环的不同之处 See the Pen for...in vs for...of by xgqfrms (@xgqfrms) on CodePen. for &quo ...

  5. 一文看懂JS继承

    继承是OOP中大家最喜欢谈论的内容之一,一般来说,继承都两种方式:接口继承和实现继承而JavaScript中没有接口继承需要的方法,因此只能依靠实现继承.在讲继承的实现之前,我们首先来回顾一下什么是继 ...

  6. JS中的offsetWidth/offsetHeight/offsetTop/offsetLeft、clientWidth/clientHeight/clientTop/clientLeft、scrollWidth/scrollHeight/scrollTop/scrollLeft

    这是一组非常容易弄混的参数!都是描述某个盒子元素的宽度.高度以及上或左的距离偏移量. 1. offsetWidth / offsetHeight(不包括外边距) offsetWidth:返回元素的宽度 ...

  7. 一文读懂JS中的原型和原型链（图解）

    讲原型的时候,我们应该先要记住以下几个要点,这几个要点是理解原型的关键: 1.所有的引用类型(数组.函数.对象)可以自由扩展属性(除null以外). 2.所有的引用类型都有一个’_ _ proto_ ...

  8. 一文搞懂js中的typeof用法

    基础 typeof 运算符是 javascript 的基础知识点,尽管它存在一定的局限性(见下文),但在前端js的实际编码过程中,仍然是使用比较多的类型判断方式. 因此,掌握该运算符的特点,对于写出好 ...

  9. 【转帖】一文看懂docker容器技术架构及其中的各个模块

    一文看懂docker容器技术架构及其中的各个模块 原创 波波说运维 2019-09-29 00:01:00 https://www.toutiao.com/a6740234030798602763/ ...

随机推荐

  1. html5 一些好用的原生事件

    计算机技术发展这么多年, 有些方面太老了,不适合新时代的发展, 使用新的规范,更方便开发和使用, 提高各方使用人的工作效率, 何乐而不为 drag drop html5新增属性 某些操作使用拖拽比较方 ...

  2. LoggingService

    package me.zhengjie.common.aop.log; import java.lang.annotation.ElementType; import java.lang.annota ...

  3. 吴裕雄--天生自然python Google深度学习框架：TensorFlow实现神经网络

    http://playground.tensorflow.org/

  4. 使用mui框架开发App,当input获取焦点时，键盘弹出，底部导航栏上升。

    转自 https://blog.csdn.net/elementFei/article/details/72917393 感谢 问题: 使用mui框架开发App,当input获取焦点时,键盘弹出,底部 ...

  5. 数学中的距离distance（未完成）

    manhattan distance(曼哈顿距离) euclidean distance(欧几里得距离) cosine distance(cosine距离) 闵式距离 切比雪夫距离

  6. SSH免密码登陆详解

    为了更好的理解SSH免密码登陆原理,我们先来说说SSH的安全验证,SSH采用的是”非对称密钥系统”,即耳熟能详的公钥私钥加密系统,其安全验证又分为两种级别. 1. 基于口令的安全验证 这种方式使用用户 ...

  7. Codeforces Roundd #573 (Div. 2)

    D. Tokitsukaze, CSL and Stone Game 题意:有n堆石头,每人每次只能去一颗石子,若轮到当前人没任何一堆石子可以取或当前人取到后剩下有俩堆石子个数相同则当前人输: 给定石 ...

  8. 微软要冷落windows是天方夜谭还是势在必行

    自从90年代开始,微软就统治着PC桌面市场,真正意义上地改变了世界,在很长一段时间内,Windows就和阳光.空气.水.电能一样,成为生活必需品,无处不在,又让人感觉不到其存在,正因如此,微软的市值于 ...

  9. cs231n spring 2017 lecture5 Convolutional Neural Networks

    1. 之前课程里,一个32*32*3的图像被展成3072*1的向量,左乘大小为10*3072的权重矩阵W,可以得到一个10*1的得分,分别对应10类标签. 在Convolution Layer里,图像 ...

  10. [LC] 28. Implement strStr()

    Implement strStr(). Return the index of the first occurrence of needle in haystack, or -1 if needle ...