滚动大小(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. 项目课 day02.1

    JWT - json-web-token json.dumps(d,separators = (',' , ':')) separators:分隔符,键值对之间  ,相连, jwt.encode({' ...

  2. Docker系列三:Dockerfile

    Dockerfile是由一系列命令和参数构成的脚本,这些命令应用于基础镜像并最终创建一个新的镜像 Dockerfile由一行行命令语句组成,支持#开头的注释 Dockerfile分为四部分:基础镜像信 ...

  3. YII框架开发一个项目的通用目录结构:

    testdrive/    index.    assets/    css/    images/    themes/           yiic.       commands/        ...

  4. Bc-数组-Stack

    1.栈,堆栈,先进后出 2.栈的几个操作: > 入栈,push > 出栈,pop > 获取栈顶元素,peek > 获取栈中共有元素个数,getSize > 是否为空,is ...

  5. selenium中quit与close方法的区别

    https://blog.csdn.net/lbxoqy/article/details/71981222

  6. 渗透利器-BadUSB 控制外网主机详解 Teensy2.0++

    准备工作 一块 Teensy2.0++ 的板子(淘宝一搜就有) Arduino编译器 1.8.7版本下载连接:arduino下载地址 Teensy插件 下载连接:Teensy下载地址 [外链图片转存失 ...

  7. [LC] 56. Merge Intervals

    Given a collection of intervals, merge all overlapping intervals. Example 1: Input: [[1,3],[2,6],[8, ...

  8. 【转】【关于 A^x = A^(x % Phi(C) + Phi(C)) (mod C) 的若干证明】【指数循环节】

    [关于 A^x = A^(x % Phi(C) + Phi(C)) (mod C) 的若干证明][指数循环节] 原文地址:http://hi.baidu.com/aekdycoin/item/e493 ...

  9. Transformer详解:各个特征维度分析推导

    谷歌在文章<Attention is all you need>中提出的transformer模型.如图主要架构:同样为encoder-decoder模式,左边部分是encoder,右边部 ...

  10. JS做深度学习3——数据结构

    最近在上海上班了,很久没有写博客了,闲下来继续关注和研究Tensorflow.js 关于深度学习的文章我也已经写了不少,部分早期作品可能包含了不少错误的认识,在后面的博文中会改进或重新审视. 今天聊聊 ...