有些时候我们可能会通过元素是否有滚动条来做一些特殊的样式处理，因为在`chrome`中，滚动条是有大小的。 比如`bootstrap-table` 就通过判断 `body`上是否有滚动条来偏移 `header`，使之对齐，不过默认的那个判断有点问题 我所知道的大概就是下面两个方法，但是细节有所差异。 `ele` 是需要检查的元素，这里仅展示y轴是否有滚动条，x轴同理 #### 最简单的方法 ```javascript funcation isScrollableY(ele){ return ele.scrollHeight > e.clientHeight } ``` `scrollWidth` 为 元素可滚动的高度， `clientHeight`  为元素可视的高度 = `height`     + `padding` 但是这个只够应对简单情况 例如： > 当元素内的子元素使用了margin之类的样式，会导致计算结果不一致 当元素还存在横向滚动轴时，也会导致计算不一致 ... 还有一些其他溢出换行啥的， 这里如果已知一些特殊情况的话，手动计算即可,下面说一个比较通用的 #### 通过是否可滚动判断是否有滚动条 ```javascript function isScrollableY(ele) { ele.scrollTop++; if (ele.scrollTop === 0) { return false; } ele.scrollTop--; return true; } ``` 这里通过尝试滚动元素，如果元素有滚动条，那么`scrollTop`会发生变化，否则将一直为 `0` --- 这里需要注意的，上面的判断仅适用于判断是否有`滚动条`,当在`chrome`上设置了 `overflow:scroll;`之后，无论页面是否可以滚动，都会有滚动条的占位的，这里还需要根据计算后的css进行判断。 例如 ```javascript function isScrollableY (ele) { let style = window.getComputedStyle(ele); return style["overflow"] !== "hidden" && style["overflow-y"] !== "hidden" && style["overflow"] !== "scroll" && style["overflow-y"] !== "scroll"; } ``` 上面提到的方法相互配合，即可达到你想要的效果 > 参考资料 : https://stackoverflow.com/questions/4814398/how-can-i-check-if-a-scrollbar-is-visible