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