JS怎么判断溢出被隐藏的元素


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            *{
                margin: 0;
                height: 0;
            }
            .box{
                width: 100%;
                height: 100px;
                background: turquoise;
                display: flex;
                justify-content:center;
                align-items:center;
            }
            ul{
                height: 100px;
                list-style: none;
                overflow:hidden;
            }
            ul li{
                height: 90px;
                display: inline-flex;
                align-items: center;
                margin-right: 30px;
            }
        </style>
        
    </head>
    <body>
        <div class="box">
            <ul>
                <li><a href="">列表一</a></li>
                <li><a href="">列表二</a></li>
                <li><a href="">列表三</a></li>
                <li><a href="">列表四</a></li>
                <li><a href="">列表五</a></li>
                <li><a href="">列表六</a></li>
                <li><a href="">列表七</a></li>
                <li><a href="">列表八</a></li>
            </ul>
        </div>
        <script type="text/javascript">
            window.onresize = function(){
                //怎么判断 列表八 是否被溢出隐藏？
                
            }
        </script>
    </body>
</html>

可以判断li的offsetTop是否大于0【需要注意如果li设置了margin-top，需要调整为margin-top的值，如5px，则需要改li.offsetTop>5】，大于就是换行被隐藏了，题主要的代码如下，有帮助或启发麻烦点个采纳【本回答右上角】，谢谢~~有其他问题可以继续交流~

img


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style type="text/css">
        * {
            margin: 0;
            height: 0;
        }

        .box {
            width: 100%;
            height: 100px;
            background: turquoise;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        ul {
            height: 100px;
            list-style: none;
            overflow: hidden;
        }

        ul li {
            height: 90px;
            display: inline-flex;
            align-items: center;
            margin-right: 30px;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li><a href="">列表一</a></li>
            <li><a href="">列表二</a></li>
            <li><a href="">列表三</a></li>
            <li><a href="">列表四</a></li>
            <li><a href="">列表五</a></li>
            <li><a href="">列表六</a></li>
            <li><a href="">列表七</a></li>
            <li><a href="">列表八</a></li>
        </ul>
    </div>
    <script type="text/javascript">
        var timer;
        var lis = document.querySelectorAll('.box li');
        function checkUL() {
            for (var li of lis)
                console.log(li.innerHTML + '==》' + (li.offsetTop > 0 ? '隐藏' : '未隐藏'));
        }
        window.onresize = function () {
            clearTimeout(timer);
            timer=setTimeout(checkUL, 200);//延时检查防止重复执行
        }
        checkUL();
    </script>
</body>
</html>

应该要获得每个列表的高度，然后再判断窗口的高度，进行比较判断窗口是否足够显示8个列表。不足则会出现列表隐藏。

你可以用一个大的div把所有的li包起来，然后在窗口缩放时候去获取到这个div的高度clientHeight，如果这个值大于100px，说明有列表被隐藏了，因为你的ul高度已经固定为100px。