星火燎原1 2021-09-20 19:36 采纳率: 100%
浏览 90
已结题

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>
  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2021-09-20 21:18
    关注

    可以判断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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 12月3日
  • 已采纳回答 11月25日
  • 创建了问题 9月20日

悬赏问题

  • ¥20 BAPI_PR_CHANGE how to add account assignment information for service line
  • ¥500 火焰左右视图、视差（基于双目相机）
  • ¥100 set_link_state
  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统
  • ¥15 真我手机蓝牙传输进度消息被关闭了，怎么打开？(关键词-消息通知)
  • ¥15 装 pytorch 的时候出了好多问题，遇到这种情况怎么处理？