一篇弄懂 scrollWidth、scrollHeight、scrollLeft和scrollTop的区别!(2)
快速理解scroll之间的区别
- 简介
- 完整代码
- 1.初始页面:
- 2.第一次纵向滚动:
- 3.第一次横向滚动条
- 4.总结
简介
1.scrollHeight/scrollWidth 属性是一个只读属性,它返回该元素的像素高度/宽度,高度包含内边距(padding),不包含外边距(margin)、边框(border),是一个整数
2.scrollLeft 属性是一个只读属性,返回当前视图中的实际元素的左边缘和左边缘之间的距离
3.scrollTop 属性是一个只读属性,返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离
完整代码
以下代码均在Chrome浏览器中测试
接下来我们看一个例子:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}#button{width: 100px;height: 40px;background-color: rgb(95, 125, 160);border: 0px ;position: fixed;left: 50%;transform: translate(-50%,0);}#box {width: 500px;height: 500px;padding: 10px;border: cadetblue solid 20px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);/* overflow: scroll;显示滚动条 */overflow: scroll;}#bigBox{background-color: rgba(150, 121, 67, 0.3);width: 600px;}.ceshi {background-color: rgb(245, 211, 161);width: 100px;height: 100px;padding: 10px;border: rgb(95, 141, 160) solid 20px;margin: 30px;display: inline-block;}</style>
</head>
<body><button id="button">点我测试</button><div id="box"><div id="bigBox"><!-- 快捷方式输入(手打): div*8#ceshi{测试div$} --><div class="ceshi">测试div1</div><div class="ceshi">测试div2</div><div class="ceshi">测试div3</div><div class="ceshi">测试div4</div><div class="ceshi">测试div5</div><div class="ceshi">测试div6</div><div class="ceshi">测试div7</div><div class="ceshi">测试div8</div></div></div>
</body>
<script>let box = document.getElementById('box')let button = document.getElementById('button');button.onclick=ceshifunction ceshi(){// scrollHeight/scrollWidth返回整个元素的高度/宽度(包括带滚动条的隐蔽的地方)// .ceshi(height:100 + padding:10*2 + border:20*2 +margin:30*2 == 220) * 4 + #box(padding:10*2) == 900console.log('scrollHeight', box.scrollHeight);// #bigBox(width:600) + #box(padding:10) == 610console.log('scrollWidth', box.scrollWidth);console.log('scrollLeft', box.scrollLeft);console.log('scrollTop', box.scrollTop);// 测试页面滚动条// console.log('body',document.body.scrollTop);// console.log('html',document.documentElement.scrollTop);}
</script>
</html>
效果如下:
1.初始页面:
我们可以看到,第一次查看的时候,测试出来的scrollHeight=900,scrollWidth=610(代码中有解释),不改变大小的情况下,以后也是这个数值。
此时滚动条都没有滚动,处于初始位置,所以scrollLeft=0,scrollTop=0。
2.第一次纵向滚动:
当纵向滚动条滚动到测试div1的上边框时,我们点击测试,可以看到scrollTop大约为40左右(#box(padding:10) + .ceshi(margin:30) == 40).
3.第一次横向滚动条
当横向滚动条滚动到测试div1的内容左边时,我们点击测试,可以看到scrollLeft大约为60左右(#box(padding:10) + .ceshi(margin:30 + border:20) == 60).
4.总结
1.我们可以看到scrollWidth和scrollHeight是一个定值,真正变化的是scrollLeft和scrollTop。就像大家在写css的时候一样,width和height是我们已经提前设置好的,只要不是再次设置,就不会改变。而left和top与定位相关,既然有定位,那它的位置就有可能再次改变(比如粘性布局,以后有空再写),以后看到这些width,height,left,top的关键词语大家要学会自己辨别。
2.通过上面的例子,相信大家已经知道它们之间的区别,再下去多多尝试,才能理解的更加透彻。
相关文章:
链接: 一篇弄懂 offsetWidth、offsetHeight、offsetleft、offsetTop和offsetParent的区别!(1).
链接: 一篇弄懂 clientWidth、clientHeight、clientLeft、clientTop的区别!(3).
一篇弄懂 scrollWidth、scrollHeight、scrollLeft和scrollTop的区别!(2)相关推荐
- 一篇弄懂 offsetWidth、offsetHeight、offsetleft、offsetTop和offsetParent的区别!(1)
快速理解offset之间的区别 1.offsetWidth与offsetHeight 2.offsetParent 3.offsetleft.offsetTop 以下代码均在Chrome浏览器中测试 ...
- php 函数有命名空间吗_一篇弄懂PHP命名空间及use的使用
最近一段时间在研究php框架,一直想的什么时候才能开发出自己的框架,当然这是为了提升自己的编程水平,同时能把平时学的零散的东西糅合在一块熟练应用.但是开发一个框架根本不知道如何做起,先开发什么,虽然p ...
- 线性卷积、周期卷积、圆周卷积------一篇弄懂
谈到DSP,几个"卷积"总是要弄清楚的.这里我们讨论的是离散时间序列.本篇主要讲解几种"卷积"的定义及运算,定义理解上通俗易懂,例子也能举一反三. 卷积 线性卷 ...
- 一篇弄懂LayoutInflater.from(context).inflate()
昨天项目的原因,使用到了这个LayoutInflater.from(context).inflate(),结果发现应该加载的布局没有显示出来.排查了好久发现是照着别人view的时候,直接把Layout ...
- 一篇弄懂webpack静态资源打包器
认识 webpack是优秀的前端构建工具,静态资源打包器,可以根据模块依赖关系进行静态资源分析,快速打包生成相对应浏览器可以直接识别的静态资源! 环境 1)node环境 2)vs code编辑器 规约 ...
- uwsgi模式_一篇就弄懂WSGI、uwsgi和uWSGI的区别
引言 最近基于Django Web框架在开发一个后端项目,在Web Server和Django应用程序交互的过程中总会碰到本文题目提及到的几个概念,笔者特意花了点时间研究了下,为方便以后温习特在此记录 ...
- 一篇弄懂 HTTP和HTTPS基本关系
1 介绍 1.1 HTTP 超文本传输协议,基于请求与响应.无状态.应用层的协议.基于TCP/IP协议传输数据,所有www文件遵守该标准.设计初衷是提供一种发布和接收HTML页面的方法. 1.2 ...
- 一篇弄懂主成分分析及matlab实现
主成分分析及matlab实现 一.主成分分析的基本原理 二.定义 三.主成分分析的计算步骤 1. 将原始数据标准化 2. 建立变量的相关系数阵: 3. 求R的特征根及相应的单位特征向量: 4.写出主成 ...
- 弄懂bind,apply和call的区别
直接上区别: 最大共同点:bind,apply,call都能改变this的指向(这也是他们的最大用处). 不同点: bind(this,数组,类数组或对象) apply(this, 数组,类数组或对象 ...
最新文章
- 1行代码消除PyTorch的CUDA内存溢出报错,这个GitHub项目刚发布就揽星600+
- android 下拉菜单触发_Android实现三级联动下拉框 城市选择器(简单)
- Spring Boot 全局异常处理
- Data Guard相关参数学习介绍
- 微众WeCross 跨链平台(3)交易流程
- while listening lectures
- JDATA绝对语义识别挑战大赛-季军方案
- [故障公告]14:40-15:00博客站点web服务器雪崩似的CPU 100%
- openwrt 在centos7 上的开发环境搭建时需要注意的地方
- lrange是取出所有值并移除么_美欧日站点亚马逊物流库存绩效指标分数达标值将降低为 450...
- REVERSE-PRACTICE-CTFSHOW-5
- 如何检测C语言中的内存漏洞(leak)?
- [k8s]kubeadm k8s免费实验平台labs.play-with-k8s.com,k8s在线测试
- 油猴脚本使用waitForKeyElements报错eslint: no-undef - `waitForKeyElements` is not defined
- ArrayQueue详解(待解决)
- JQuery插件,轻量级表单模型验证
- jpa mysql 配置文件_Spring+JPA+MySQL的配置文件
- 20172316 2017-2018-2《程序设计与数据结构》第七周学习总结
- ENVI5.3.1使用Landsat 8影像进行主成分分析实例操作
- Jenkins集群搭建