有没有办法在不使用 jquery 的情况下检查 Javascript 中何时出现滚动条？

Question

我希望能够检测到垂直滚动条何时出现，但我不想使用 jQuery。 有没有办法在不使用 jQuery 的情况下做到这一点？

Answer 1

您可以检查元素的scrollHeight是否大于其clientHeight 。

const hasScrollBar = elem.scrollHeight > elem.clientHeight;

 const div = document.querySelector("div"); const hasScrollBar = div.scrollHeight > div.clientHeight; console.log(hasScrollBar);

 <div style="max-height: 100px; border: 1px solid blue; overflow: auto;"> <p>Stuff</p> <p>Stuff</p> <p>Stuff</p> <p>Stuff</p> <p>Stuff</p> <p>Stuff</p> <p>Stuff</p> </div>

当然，这不是最可靠的解决方案，因为您还需要检查元素的overflow-y CSS 属性。 如果设置为scroll ，那么总会有一个滚动条，但如果设置为auto ，则需要检查scrollHeight和clientHeight 。

const styles = window.getComputedStyle(elem);
const hasScrollBar = styles.overflowY === "scroll" 
            || styles.overflowY === "auto" && elem.scrollHeight > elem.clientHeight;

overflow: scroll ：

 const elem = document.querySelector("div"); const styles = window.getComputedStyle(elem); const hasScrollBar = styles.overflowY === "scroll" || styles.overflowY === "auto" && elem.scrollHeight > elem.clientHeight; console.log(hasScrollBar);

 <div style="height: 100px; overflow: scroll; border: 1px solid black;"></div>

没有滚动条的例子：

 const elem = document.querySelector('div'); const styles = window.getComputedStyle(elem); const hasScrollBar = styles.overflowY === "scroll" || styles.overflowY === "auto" && elem.scrollHeight > elem.clientHeight; console.log(hasScrollBar);

 <div style="height: 300px; border: 1px solid black;"></div>

document.scrollingElement示例：

 const elem = document.scrollingElement; const hasScrollBar = elem.scrollHeight > elem.clientHeight; console.log(hasScrollBar);

 <p style="margin-top: 500px;">Bottom</p>