js获取页面滚动高度这些不常见,但却很实用的JS知识点(下)这篇

二、element(DOM目标)

1、element属性和方法

1.1、clientHeight/clientWidth特性

clientHeight:原素的内部高度,包括内边距,但不包含水准滚动条、外框和外边距。

clientWidth:原素的内部总宽,包括内边距,但不包含竖直滚动条、外框和外边距。

此特性会把获取的值四舍五入取整数。

document.querySelector(“span”).clientWidth

clientHeight和clientWidth整合性一致

js获取页面滚动高度案例-js设置div的宽度和高度插图

1.2、scrollHeight/scrollWidth特性

类似上方的clientHeight/clientWidth,不同在于clientHeight/clientWidth在原素设定overflow后,不包括掩藏不可见的高度部分。而scrollHeight/scrollWidth却包括掩藏的那部分高度。

我认为利用这个特点来确定是否较长,假如scrollWidth大于clientWidth,则表示较长,这时能够对于一些较长后表明…元素在浮上去后展现一个自定义的toolip.

scrollHeight和scrollWidth整合性一致

js获取页面滚动高度案例-js设置div的宽度和高度插图1

1.3、getBoundingClientRect()方式

回到元素的尺寸以及相较于视口位置(双眼看得见的文档地区)。

这个方法超级好用。不管你的原素在什么地方,它都会计算出来当前原素等同于视口的边缘位置,和滚动条无关。

js获取页面滚动高度案例-js设置div的宽度和高度插图2

返回值为

{

bottom:xx,//元素底部离视口顶部的距离

height:xx,//原素高度,和元素的clientHeight特性一致,但比它精准,会保留小数

left:xx,//原素左侧离视口左边的距离

right:xx,//原素右侧离视口左边的距离

top:xx,//原素上端离视口顶部的距离

width:xx,//原素总宽,和元素的clientWidth特性一致,但比它精准,会保留小数

}

1.2、compatMode

表明当前文档的渲染模式是怪异模式/混杂模式还是标准模式。

document.compatMode // BackCompat怪异模式, CSS1Compat标准模式

js获取页面滚动高度案例-js设置div的宽度和高度插图3

1.3、defaultView

返回当前 document 对象所关联的 window 对象,如果没有,会返回 null。

document.defaultView //返回还是window,我为什么不直接 使用window呢?

上面的代码很平淡,不足为奇,可是下面的就不一定了

<div>

得到这个 window 后,有什么用呢?

我们可以想象一个场景,当我们缩放 window 窗口时,会触发 window 的 onresize 事件,但是缩放 div,却不会触发 onresize 事件,因为 dom 没有 onresize,那么如何监听一个 div 的 resize 呢?

就是上述的方式,在 div 中套一个 object。我不监听 div,我监听 div 中的 object,一旦 div 变了,object 不也就变了吗?

然后通过 object 返回的一个 window 对象,就自然可以绑定 onresize 事件了

document.querySelector("object").contentDocument.defaultView .addEventListener("resize", () => {    //只要div尺寸变化,object尺寸就变化,resize就能监听到。不管何种原因导致的尺寸变化。都会监听到。
});

除此之外,我有一遍专门介绍如何彻底解决 div 尺寸变化问题的文章,有兴趣的伙伴可以阅读

js获取页面滚动高度案例-js设置div的宽度和高度插图4

1.4、designMode

控制整个文档是否可编辑。有效值为 “on” 和 “off” 。

默认值为 “off” 。如果设置为”on”,则好比给 html 所有的元素都添加了 contenteditable 属性。

js获取页面滚动高度案例-js设置div的宽度和高度插图5

1.5、documentElement

会返回文档对象(document)的根元素。

可以通过
document.documentElement.clientHeight 来获取浏览器的可用高度,这个高度和 html 或者 body 的 style 上的 height 无关,只与浏览器的上方地址栏,下方工具栏等有关,和 window.innerHeight 相等。

js获取页面滚动高度案例-js设置div的宽度和高度插图6

2、document 事件

2.1、onscroll / onwheel

类似于 window 的 onscroll 和 onwheel。只不过绑定对象为 document

document.addEventListener("scroll", function (e) {
    console.log("111");
});
document.addEventListener("wheel", function (e) {
    console.log("111");
});

发表评论

后才能评论