很多时候,我们需要检查一个元素是否已经部分不在或者全部不在视窗区域,当这种现象发生时做相应的处理。
比如在CMS编辑内容时,其工具菜单很有可能因为内容区域过长导致滑出视窗区域,而工具栏又是经常要使用的,这就非常不便。
那么如何检查这种情况呢?我们来看看 getBoundingClientRect() 函数吧。
element.getBoundingClientRect()调用将返回一个对象,该对象包含了该元素相对于viewport的top,bottom,left,和right的位置。
我们看看以下代码:
var elem = document.querySelector('#some-element'); var bounding = elem.getBoundingClientRect(); // Returns something like this: // {top: -123, left: 0, right: 0, bottom: 25} console.log(bounding);
我们可以通过简单的数学比较来检查是否元素已经跑到了viewport的外部。
如果bounding.top或者bounding.left小于0,那么top或者left部分已经不在viewport里面。如果bounding.right大于viewport.width或者bounding.bottom大于viewport.height,则right或者bottom部分就不在viewport里面了。
if (bounding.top < 0) { // Top is out of viewport } if (bounding.left < 0) { // Left side is out of viewoprt } if (bounding.bottom > (window.innerHeight || document.documentElement.clientHeight)) { // Bottom is out of viewport } if (bounding.right > (window.innerWidth || document.documentElement.clientWidth)) { // Right side is out of viewport }
需要注意的是并不是所有的浏览器都支持window.innerWidth和window.innerHeight,因此我们必须有能力回滚兼容到document.documentElement.clientWidth和document.documentElement.cleintHeight属性上面。
写一个helper函数:
/*! * Check if an element is out of the viewport * (c) 2018 Chris Ferdinandi, MIT License, https://gomakethings.com * @param {Node} elem The element to check * @return {Object} A set of booleans for each side of the element */ var isOutOfViewport = function (elem) { // Get element's bounding var bounding = elem.getBoundingClientRect(); // Check if it's out of the viewport on each side var out = {}; out.top = bounding.top < 0; out.left = bounding.left < 0; out.bottom = bounding.bottom > (window.innerHeight || document.documentElement.clientHeight); out.right = bounding.right > (window.innerWidth || document.documentElement.clientWidth); out.any = out.top || out.left || out.bottom || out.right; out.all = out.top && out.left && out.bottom && out.right; return out; };
随后,我们通过下面的代码来简单调用检查是否不在viewport中:
var elem = document.querySelector('#some-element');
window.addEventListener( 'scroll', handler )
function handler(){
var isOut = isOutOfViewport(elem); if (isOut.top) { // Top is out of viewport } if (isOut.left) { // Left side is out of viewoprt } if (isOut.bottom) { // Bottom is out of viewport } if (isOut.right) { // Right side is out of viewport }
if (isOut.any) {
// At least one side of the element is out of viewport
}
if (isOut.all) {
// The entire element is out of viewport
}
}
https://gomakethings.com/how-to-test-if-an-element-is-in-the-viewport-with-vanilla-javascript/