首页 > 其他分享> > 获取dom是否存在可滚动的子节点，支持多层嵌套，100层以内

获取dom是否存在可滚动的子节点，支持多层嵌套，100层以内

2022-02-28 12:03:44 作者：互联网

scrollHeight

指的是元素的内容高度，即如果有滚动条，它的值会等于内容实际的高度加padding值（并不包含border和margin值），在没有内容溢出的情况下它的值等于clientHeight。

clientHeight

指的是元素的内部高度的px值，包括content和padding值之和，并不包括横向滚动条（horizontal scrollbar）、border和margin的值,

故如果每个元素的scrollHeight > clientHeight，则可以说明其出现了竖向滚动条

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .scrollBox {
            height: 300px;
            border: 1px solid #999;
            overflow: auto;
            overflow: overlay;
        }
        
        .inner {
            height: 900px;
            background: blueviolet;
        }
    </style>
</head>

<body>
    <div class="box">
        <p id="txt"></p>
        <div class="chexk1">
            <div class="chexk2">
                <div class="scrollBox">
                    <div class="inner"></div>
                </div>
            </div>
        </div>
    </div>
    <script>
        window.onload = function() {
            /**
*   检测是否有可滚动的子节点
* box 检车目标
* maxLoop 最大轮循，超过直接中断 返回undefined
* dir 检测滚动方向，默认只为"v",也就是垂直方向，"h"为垂直方向
* scrollHeight：
* 指的是元素的内容高度，即如果有滚动条，它的值会等于内容实际的高度加padding值（并不包含border和margin值），在没有内容溢出的情况下它的值等于clientHeight。
* clientHeight：
* 指的是元素的内部高度的px值，包括content和padding值之和，并不包括横向滚动条（horizontal scrollbar）、border和margin的值
* 故如果每个元素的scrollHeight > clientHeight，则可以说明其出现了竖向滚动条

* **/
            function getScrollableChildren(box, maxLoop = 100, dir = "v") {
                let v = 0;
                let direction = dir == "h" ? "h" : "v";
                var result = null;

                function check(box) {
                    var childs = box.children;
                    if (result) {
                        return result;
                    }
                    if (v > maxLoop) {
                        return undefined;
                    }
                    for (let i = 0; i < childs.length; i++) {
                        v++;
                        var el = childs[i];
                        if (direction === "v" && el.scrollHeight > el.clientHeight) {
                            result = el;
                            break;
                        } else if (direction === "h" && el.scrollWidth > el.clientWidth) {
                            result = el;
                            break;
                        } else if (!result && v < maxLoop && el.children) {
                            check(el, maxLoop);
                        }
                    }
                    return result;
                }
                return check(box, maxLoop)
            }

            var box = document.querySelector(".box");
            var scrollBox = getScrollableChildren(box);

            console.log(" el.scrollHeight > el.clientHeight", scrollBox)
            document.querySelector("#txt").innerHTML = ".box 内部轴可滚动元素是:" + (scrollBox ? "." + scrollBox.getAttribute("class") : "--");
        }
    </script>
</body>

</html>

代码参考:判断元素是否有滚动条_socaicaicaicai的博客-CSDN博客_如何判断元素是否有滚动条

在线效果:JS Bin - Collaborative JavaScript Debugging

标签：box,el,dom,clientHeight,滚动条,嵌套,result,100,maxLoop
来源： https://blog.csdn.net/u014071104/article/details/123179143