JavaScript DOM位置尺寸API

bistukey 2019-06-28

我们需要了解几个基础概念，每个HTML元素都有下列属性

offsetWidth      clientWidth     scrollWidth

offsetHeight     clientHeight    scrollHeight

offsetLeft       clientLeft      scrollLeft

offsetTop        clientTop       scrollTop

为了理解这些属性，我们需要知道HTML元素的实际内容有可能比分配用来容纳内容的盒子更大，因此可能会出现滚动条，内容区域是视口，当实际内容比视口大的时候，需要把元素的滚动条位置考虑进去。

  1. clientHeight和clientWidth用于描述元素内尺寸，是指 元素内容+内边距 大小，不包括边框（IE下实际包括）、外边距、滚动条部分
  2. offsetHeight和offsetWidth用于描述元素外尺寸，是指 元素内容+内边距+边框，不包括外边距和滚动条部分
  3. clientTop和clientLeft返回内边距的边缘和边框的外边缘之间的水平和垂直距离，也就是左，上边框宽度
  4. offsetTop和offsetLeft表示该元素的左上角（边框外边缘）与已定位的父容器（offsetParent对象）左上角的距离
  5. offsetParent对象是指元素最近的定位（relative,absolute）祖先元素，递归上溯，如果没有祖先元素是定位的话，会返回null
bistukey

bistukey

相关推荐

CSS——修改滚动条样式

::-webkit-scrollbar-corner— 当同时有垂直滚动条和水平滚动条时交汇的部分.

ThikHome / 0评论 2020-06-26

CSS-界面滚动时不显示滚动条

background-color: #aaa; /* or add it to the track */

wangjie / 0评论 2020-05-15

Python selenium 滚动条

在我们使用Python + selenium 的时候，会遇到如下报错，原因是当页面上的元素超过一屏后，想操作屏幕下方的元素，是不能直接定位到，会报元素不可见的。这时候需要借助滚动条来拖动屏幕，使被操作的元素显示在当前的屏幕上。selenium里面也没有直接

letheashura / 0评论 2020-05-10

js里关于各种尺寸的获取

获取元素可视部分的宽度，即 CSS 的 width 和 padding 属性值之和，元素边框和滚动条不包括在内，也不包含任何可能的滚动区域。当元素设置了 overflow:visible 样式属性时，元素的总宽度，也称滚动宽度。在默认状态下，如果该属性值大

sixthelement / 0评论 2020-04-30

selenium滚动条

#拖动到滚动条底部---向下。#滚动左右滚动条---向右。# #控制滚动条逐步滚动

letheashura / 0评论 2020-03-05

CSS-界面滚动时不显示滚动条

background-color: #aaa; /* or add it to the track */

尚衍亮 / 0评论 2020-02-26

css自定义滚动条

某个div，设置了它的属性overflow: scroll。溢出部分会以滚动的形式显示。这时，可以对这个div设置这部分的滚动条的样式了。

somboy / 0评论 2020-02-02

CSS 禁止底部出现滚动条

2、在不需要时隐藏指当浏览器窗口宽度或高度大于页面的宽或高时，不显示滚动条；反之，则显示；

zengni / 0评论 2019-12-31

原生js判断某个区域的滚动条滚动到了底部

你必须知道这个方法 可以判断滚动条滚动到了底部哈！

Wmeng0 / 0评论 2019-12-26

vue生成pdf

let eleOffsetTop = ele.offsetTop; // 获得该容器到文档顶部的距离。let win_out = window.innerWidth; // 获得当前窗口的宽度。// allowTaint: true, //允许 can

songfens / 0评论 2019-12-06

BScroll使用

　　当页面内容的高度超过视口高度的时候，会出现纵向滚动条；当页面内容的宽度超过视口宽度的时候，会出现横向滚动条。也就是当我们的视口展示不下内容的时候，会通过滚动条的方式让用户滚动屏幕看到剩余的内容。　　　　要注意的是，better-scroll 只处理容器

JayFighting / 0评论 2019-12-02

浏览器私有属性

-webkit-box-shadow: inset 0 0 0 1000px white !-webkit-overflow-scrolling: touch; //允许独立的滚动区域和触摸回弹

RexLeee / 0评论 2019-11-10

html,vue转换成PDF

var element = $; // 这个dom元素是要导出pdf的div容器。var offsetLeft = element.offset().left; // 获得该容器到文档最左的距离。var win_o = window.inner

大地飞鸿 / 0评论 2019-11-08

iframe出现双层滚动条解决方案

在开发中出现一个iframe双滚动条问题，查了很多资料，网上的解决方案是定义iframe的onload事件，加载时重新加载高度，但是由于项目中页面渲染完成后，点击按钮动态生成数据，这时候上面的方案就不可行了。

zZoOoOJaVa / 0评论 2014-06-24

MacOS下JetBrains IDE不显示横向滚动条

MacOS系统上，JetBrains诸如PhpStorm、IntelliJ IDEA、PyCharm等各种IDE在编辑器上默认不显示横向滚动条。当设置的字体比较大，需要向右滑动时很可能因为没有横向滚动条而大为恼火。滚动鼠标滑轮时按shift，此时是滚动横向

Martnn / 0评论 2019-11-05

DIV 自定义滚动条样式（二）

流浏览器自带的滚动条样式很丑，确实有必要美化。滚动条从外观来看是由两部分组成：1，可以滑动的部分，我们叫它滑块2，滚动条的轨道，即滑块的轨道，一般来说滑块的颜色比轨道的颜色深。而且不同的浏览器下，CSS 滚动条属性的写法也不一样，如果各个浏览器都需要兼容，

echoes / 0评论 2019-11-03

css去谷歌火狐IE滚动条

.deals::-webkit-scrollbar,.pdfcontent::-webkit-scrollbar,.topPdf::-webkit-scrollbar {. scrollbar-width: none;-ms-scroll-chaining

sdbxpjzq / 0评论 2019-10-25

关于element ui滚动条使用

element ui 自带的滚动条使用。在容器的直接外层添加 . 另外添加全局的样式

sixthelement / 0评论 2019-10-20

jquery判断页面滚动条(scroll)是上滚还是下滚，且是否滚动到头部或者底部

webtouch页面，防苹果手机safari浏览器，网上滑动，底部导航消失，滑动到底部又出现。向下滑动，底部导航出现。因此只能判断滚动条是上滚下滚等。关于手机手势，后面的文章会介绍，欢迎关注！

dly / 0评论 2015-05-29

修改滚动条默认样式

width: 265px;height: 400px;position: absolute;top: 33px;left: 13px;overflow:hidden;overflow-x: hidden;overflow-y: auto;color: #0

xtuhcy / 0评论 2017-09-25

在PYQT5中QscrollArea(滚动条)的使用方法

##创建一个滚动条

追逐阳光的风 / 0评论 2019-06-14

jQuery判断滚动到底部或顶部

$.scrollTop()和$.scrollTop()具有相同的效果，都为返回滚动条的垂直位置,但是$.scrollTop()被所有浏览器支持。所以建议以后用$.scrollTop()来获取滚动距离。但是出滑屏智能机后，手机页面有一个橡皮筋效果，所以滑动到

dengjianbin / 0评论 2018-08-24

前端项目修改默认滚动条样式

写过挺多项目都需要改变滚动条的默认样式 并不想单独下载和引入插件 因此纯css修改默认滚动条的样式 这次算统一整理下方法，直接上代码。下边这个很精简。

李小丰天天向上 / 0评论 2019-08-16

XP系统开机到滚动条时就会重启怎么办？XP开机到滚动条时会重启电脑的解决方法

xp系统死机时自动重启的方法。xp系统重启后D盘消失了如何找回？

87291245 / 0评论 2016-05-06

滚动条 显示 ScrollPaneExample

Shell shell = new Shell();shell.setSize(300,200);shell.open();shell.setText("ScrollPaneExample");Figure fixedSize = ne

liuyacsdn / 0评论 2013-04-23

Element-ui el-scrollbar 源码解析

前几天美化博客时发现滚动条在window下实在太难看，所以在基于vue的技术上寻找美化滚动条的方法。记得Element-ui源码中有名为 el-scrollbar 的滚动组件，虽然文档上没有提到，但使用的人还是不少。因为操作系统和浏览器的不同，滚动条外观是

生如蚁美如神 / 0评论 2019-07-01

css隐藏移动端滚动条并且ios上平滑滚动

</html>设置滚动条隐藏.par-type ::-webkit-scrollbar {display: none;}此时内容可以正常滚动，滚动条也已隐藏，但是ios手机上出现滚动不流畅，影响用户的体验，安卓手机上是正常的。此时，加上css代

Jemy杰 / 0评论 2019-06-30

纯css，div隐藏滚动条，保留鼠标滚动效果。[转载]

前记当我们的内容超出了我们的div，往往会出现滚动条，影响美观。尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。我们不希望出现滚动条，也不希望超出去的内容被放逐，就要保留鼠标滚动的效果。方法这里介绍一个简单的方法。大体思路是在div外面再

xiaohuli / 0评论 2019-06-29

ie下带滚动条容器background属性和border属性的bug

现象封装的angularjs hikSelect指令在个别ie11浏览器下下拉选项在滚动是会出现横线.结论经过测试当在一个带滚动条的div上同时设置background和上下边框的border属性,拖动滚动条时会出现横线.经测试现象消失。总结问题虽然解决了

willluckysmile / 0评论 2019-06-28

[CSS]添加横向滚动条

<table id="datagrid" style="overflow-x:auto;width:auto; height: auto">插入overflow-x即可.插入在哪个标签,则滚动条针对哪个标

MaureenChen / 0评论 2019-03-27

jQuery判断滚动到底部或顶部

$.scrollTop()和$.scrollTop()具有相同的效果，都为返回滚动条的垂直位置,但是$.scrollTop()被所有浏览器支持。所以建议以后用$.scrollTop()来获取滚动距离。但是出滑屏智能机后，手机页面有一个橡皮筋效果，所以滑动到

81497307 / 0评论 2018-08-24

自定义滚动条样式

width: 5px;height: 5px;background-color: #f2f2f2;-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);border-radius: 5px;backgrou

Justacoder / 0评论 2018-02-03

修改滚动条默认样式

width: 265px;height: 400px;position: absolute;top: 33px;left: 13px;overflow:hidden;overflow-x: hidden;overflow-y: auto;color: #0

xtuhcy / 0评论 2017-09-25

HTML元素坐标定位，这些知识点得掌握

视口坐标是相对于窗口的坐标，而文档坐标是相对于整个文档而言。例如，在文档坐标中如果一个元素的相对于文档的Y坐标是200px，并且用户已经把浏览器向下滚动了75px，那么视口坐标中元素的Y坐标为200px–75px=125px。Window对象的pageXO

CoreyJia / 0评论 2017-03-14

jquery判断滚动条是否到达顶部或者底部

[size=medium]var scroll_top = $.scrollTop(); //scroll_top是滚动条上部离文档顶部的高度。当scroll_top+window_height>=doc_height时，表示滚动条已经到达窗口底部。

ParadiserD / 0评论 2017-03-12

js中的各种宽高

之前项目刚写了个判断触底自动加载更多的功能，发现自己对各种宽、高的定义还是很模糊。终于没有偷懒，写了个demo理解了一下。网上也有很多整理好的文章，为了加强下自身记忆，顺便也许能给些建议。// 元素的内容部分 + 对应的padding；当外层元素有滚动条时

Element张冰 / 0评论 2019-06-28

Jquery控制滚动Div 滚动条事件

});最近项目中出现一个页面中有多个Div滚动，这样用户体验是非常不爽的，主要原因在于如果用滚轮滚动滚动条到最顶部或最底部，他外层的滚动条也会跟着滚动，这样会让人眩晕，，出于这个问题，写了一个指定区域内滚动限制方法，如下：

81751330 / 0评论 2016-09-14

Mac 鼠标滚轮方向问题探究设计之源

系统偏好设置之中既有鼠标选项又有触控板选项，且两者均有滚动方向设置，在一处选择后自动同步到另一处。这样一来，使用外置带有滚轮的鼠标时会出现违背用户习惯的现象。首先明确一点，对于触摸板内容随手指移动，即滚动方向：自然，符合人类交互直觉。苹果认为鼠标滚轮是在控

vitavae / 0评论 2019-06-28

jspdf + html2canvas 实现html转pdf (提高分辨率版本)

var element = $; // 这个dom元素是要导出pdf的div容器。var offsetTop = element.offset().top; // 获得该容器到文档顶部的距离。var win_o = window.innerWi

New丶Elements / 0评论 2019-06-28

博客改造升级

开始之前写的个人博客确实有点太丑了，最近重写了一番。做了移动端适配，增加了文章标签以及做了相册等功能。一图胜千言，且看如下效果：。自定义滚动条目前对于自定义滚动条支持情况比较好的也就只有Chrome了，所以针对Chrome有必要把滚动条的样式改造一下。虽然

intimater / 0评论 2019-06-28

Chrome浏览器内，多个同级的滚动条只有第一个好用的问题解决

今天写WebApp的页面的时候，因为页面中存在多个同级的块，而会根据窗口大小的变化，同级的块可能都会出现滚动条。把代码加了个鼠标滚轮事件监听，在回调响应方法中不执行任何代码，就是一个空回调方法，发现就好用。将它禁用掉，然后重启浏览器，问题解决。这个配置描述

Teresasmida / 0评论 2016-04-01

【前端工程师手册】前端应该知道的各种宽高

引子曾经校招面试的时候，学习了三个月前端的我去某厂面试，面试官循循善诱考察了一个开发中的实际场景，其中有需要用到某元素的高度，面试官问我clientHeight和offsetHeight的区别是什么，我当时一脸懵逼，这个问题对于当时的我来说已经完全超纲了.

LONGSHAN / 0评论 2019-06-27

CSS 禁止滚动条

指当浏览器窗口宽度或高度大于页面的宽或高时，不显示滚动条；反之，则显示；在里加入style="overflow-x:hidden"，可隐藏水平滚动条；

dangzhangjing / 0评论 2011-08-11

超出指定距离固定导航（微信浏览器页面没有加载完获取控件属性办法）

工作需求 —— 首页banner图下面有一个产品筛选导航，当往下滑动，筛选栏被遮盖的时候要求筛选栏固定在顶部，即内容不会被隐藏，永远显示在最顶端。发现在“微信”浏览器中，页面加载完获取筛选div控件到body顶部的距离不正确，因为，图片等信息没有加载完成，

jetamiett / 0评论 2015-09-06

jqgrid在chrome下水平滚动条的处理方法

chrome里默认的table计算值会比ie或者firefox中的多出一个像素。即便添加如下配置

pworld / 0评论 2015-07-29

用CSS美化你的滚动条

本文将会告诉你如何用CSS修改/美化浏览器页面上出现的滚动条。改变它们的颜色，调整它们的外形，适配你对页面UI设计。我们首先将会看看谷歌浏览器提供了哪些CSS属性，最后，还将介绍如何用jQuery支持其它类型的浏览器。各种浏览器对CSS滚动条的支持情况这

AlisaClass / 0评论 2015-06-05

jquery判断页面滚动条(scroll)是上滚还是下滚，且是否滚动到头部或者底部

webtouch页面，防苹果手机safari浏览器，网上滑动，底部导航消失，滑动到底部又出现。向下滑动，底部导航出现。遇到问题1、我一开始用swipeup和swipedown来做，发现因为有滚动条，不会触发。因此只能判断滚动条是上滚下滚等。关于手机手势，后

EdwardSiCong / 0评论 2015-05-30

jquery如何获取元素的滚动高度

获取浏览器显示区域（可视区域）的高度 ： $(window).height(); 获取浏览器显示区域（可视区域）的宽度 ：$(window).width(); 获取页面的文档高度 $(document).height(); 获取页面的文档宽度 ：$(doc

luyou0 / 0评论 2015-05-08

js与jquery获得页面大小、滚动条位置、元素位置

获取浏览器显示区域的高度：$.height();获取页面的文档宽度：$.width();获取滚动条到顶部的垂直高度：$.scrollTop();offset方法是一个很有用的方法，它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果

sunnygirls / 0评论 2015-04-09