js 判断元素是否在指定元素的可视区内

末蓝、 2022-10-26 14:07 157阅读 0赞

函数

export const isInContainer = (el, container) => {
        if (!el || !container) return false;
    
        const elRect = el.getBoundingClientRect();
        let containerRect;
    
        if ([window, document, document.documentElement, null, undefined].includes(container)) {
            containerRect = {
                top: 0,
                right: window.innerWidth,
                bottom: window.innerHeight,
                left: 0
            };
        } else {
            containerRect = container.getBoundingClientRect();
        }
    
        return elRect.top < containerRect.bottom &&
            elRect.bottom > containerRect.top &&
            elRect.right > containerRect.left &&
            elRect.left < containerRect.right;
    };

用法

<div id="container">
        <div id="box"></div>
    </div>
    
    <script>
    console.log('isInContainer', isInContainer(
        document.getElementById('box'), 
        document.getElementById('container')
    ))
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，157人围观）

还没有评论，来说两句吧...

相关阅读

相关元素可视区client

元素可视区 client client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态

拼搏现实的明天。/ 2024年03月17日 23:45/ 0 赞/ 73 阅读

相关 IntersectionObserver简单介绍及使用，监听元素是否在可视区域内

前言 IntersectionObserver 之前就有所了解，但是一直没有用，当时觉得浏览器兼容性不好，直接用onscroll监听也能实现相关功能，但是随着浏览器支持性

柔情只为你懂/ 2023年10月10日 20:08/ 0 赞/ 23 阅读

相关 JS的元素偏移量offset.元素可视区client.元素滚动scroll.的作用及其区别

1.元素偏移量offset; 我们可以使用offset系列相关属性可以动态的得到元素的位置(偏移).大小等… element.offsetParent; 返回的是

傷城~/ 2023年07月06日 08:44/ 0 赞/ 49 阅读

相关如何判断指定dom元素是否在屏幕内

实现原理想要实现这个功能，就要知道具体的实现原理。下面直入主题。我们通过浏览器在浏览一个网页时候是这个样子的，如图所示页面的长宽，以及各dom的坐标都是静止的，

朱雀/ 2023年02月17日 02:39/ 0 赞/ 199 阅读

相关 js判断一个元素是否在数组中存在

js判断数组中是否包含指定的元素 indexOf()方法 includes方法 indexOf()方法概述: indexOf()方法返

逃离我推掉我的手/ 2022年12月25日 03:59/ 0 赞/ 227 阅读

相关面试官：JavaScript如何判断一个元素是否在可视区域中？

![bfd80b13fc38fdd6eebfc4392426e0a4.png][] 一、用途可视区域即我们浏览网页的设备肉眼可见的区域，如下图 ![275e5e11

r囧r小猫/ 2022年11月12日 05:26/ 0 赞/ 221 阅读

相关 js 判断元素是否在指定元素的可视区内

函数 export const isInContainer = (el, container) => { if (!el || !container

末蓝、/ 2022年10月26日 14:07/ 0 赞/ 158 阅读

相关如何利用JS检查元素是否在视口内

前言分享两个监测元素是否在视口内的方法 1. 位置计算使用 Element.getBoundingClientRect() 方法返回元素相对于视口的位置 1

骑猪看日落/ 2022年10月15日 00:42/ 0 赞/ 195 阅读

相关 JS-判断元素在当前窗口是否可见

JS-判断元素在当前窗口是否可见 / 判断元素是否可见 @param {Object} elm / function che

川长思鸟来/ 2022年04月13日 12:49/ 0 赞/ 491 阅读

相关 js判断元素是否出现在视口内

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

太过爱你忘了你带给我的痛/ 2021年11月23日 05:38/ 1 赞/ 367 阅读