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

Question

I would like to be able to detect when the vertical scroll bar appears but i don't want to use jQuery. Is there some way to do this without using jQuery?

Answer 1

You can check if the element's scrollHeight is greater than its 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>

Of course, this is not the most robust solution, as you will also want to check the overflow-y CSS property of the element. If it is set to scroll , then there is always a scrollbar, but if it is set to auto , then the scrollHeight and clientHeight will need to be checked.

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

Example with 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>

Example without scrollbar:

 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>

Example with document.scrollingElement :

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

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