clientWidth与offsetWidth与scrollWidth

clientWidth与clientHeight

是元素的一个属性，表示元素的实际大小。,值为padding+content区的尺寸,不包括滑动条

offsetWidth与offsetHeight

是元素的一个只读属性，包含conten+padding+border尺寸，如果有滑动条也会包括在内。

scrollWidth与scrollHeight

适用于当元素尺寸过大，产生滑动条的情况。
尺寸为padding+content，当页面尺寸合适，没有滑动条时scrollWidth==clientWidth

scrollTop

scrollTop是当前元素内容content顶部到可视区域clientHeight的高度

判断元素是否可视

通过判断元素顶部到可视窗口的距离。

function isInViewPortOfOne (el) {// viewPortHeight 兼容所有浏览器写法const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight const offsetTop = el.offsetTopconst scrollTop = document.documentElement.scrollTopconst top = offsetTop - scrollTopreturn top <= viewPortHeight
}

clientWidth与offsetWidth与scrollWidth相关推荐

四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异...
转自http://blog.163.com/chudaozhe@126/blog/static/1157323432011626112137928/ 网页可见区域宽:document.body.cli ...
js获取屏幕尺寸、clientWidth、offsetWidth、scrollWidth等区别
js获取元素/屏幕宽高总结如下 1.获取网页可视区域宽高(随着页面的缩放,所获取的值会相应改变) 方法一.不包括滚动条的宽高在内 document.documentElement.clientWid ...
JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth
常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.b ...
各种边距clientWidth、offsetWidth、scrollWidth、clientLeft、getBoundingClientRect详解
1.clientWidth.offsetWidth.scrollWidth <!DOCTYPE html> <html><head><meta charset ...
JS中关于clientWidth、offsetWidth、scrollWidth
网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offs ...
JS中的位置和宽度：clientWidth、offsetWidth、scrollWidth等区别
首先定义一个div. 然后稍微装修一下下面开始区分一.clientWidth和clientHeigh . clientTop和clientLeft 1,clientWidth的实际宽度 clien ...
clientWidth、offsetWidth、scrollWidth区别
1, clientWidth的实际宽度 clientWidth = width+左右padding 2, clientHeight的实际高度 clientHeight = height +上下padd ...
screenWidth、clientWidth、offsetWidth、 scrollWidth的区别
在做移动端开发的时候,我们会需要用到屏幕的宽度,根据不同屏幕的宽度写交互代码. 有那么多种宽度,我们应该用哪个呢?它们有什么区别呢? document.body.clientWidth:可见区域宽. ...
[Z]四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释...
http://wenku.baidu.com/view/bc862eea6294dd88d0d26b52.html### 转载于:https://www.cnblogs.com/waytofall/p ...