CSS：有没有办法只在显示滚动条时定位元素？答案

【问题标题】：CSS: Is there a way to target an element only when scroll bars are showing?CSS：有没有办法只在显示滚动条时定位元素？
【发布时间】：2023-03-10 08:11:01
【问题描述】：

我有一个垂直滚动框架，中间有一个黑框，但是在 Windows 中测试它时，它被滚动条覆盖，所以我不得不为其添加更多填充。现在在 Windows 上，它看起来很好，因为有滚动空间并且黑框居中（https://i.imgur.com/ZCK9WPj.png）。但是现在在 Mac 上，因为滚动条不显示，所以在分界线显示之前右侧有大量额外空间 (https://imgur.com/a/3q3Kt17)。
有没有办法干净地解决这个问题？

【问题讨论】：

完全禁用滚动条是您想要的选项吗？您无法检测 CSS 是否存在滚动条。您的代码确实不需要填充以避免与滚动条发生冲突。可以发一下吗？
如果我可以禁用 ALL 的滚动条，那就太好了！我可以为 Windows 的浏览器做到这一点吗？
stackoverflow.com/questions/16670931/…
请务必考虑，您的页面确实没有理由需要填充以避免与滚动条发生冲突。滚动条使视图窗格变小，它不会覆盖它的顶部。
谢谢！这正是我要做的事情

标签： html css cross-browser

【解决方案1】：

您应该尝试检测窗口是否有带有 Javascript 的滚动条


if ((window.innerWidth - document.documentElement.clientWidth) > 0) {
  // Do some stuff like
  document.body.classList.add('withScrollbar')
}

【讨论】：

【解决方案2】：

您可以比较任何滚动元素的clientHeight 和scrollHeight 以确定滚动条是否正在显示。如果容器也可以水平滚动，您可以添加clientWidth 和scrollWidth 比较。

const element = document.querySelector('.scroll-container')

if(element.clientHeight > element.scrollHeight) {
  element.classList.add('scroll-active')
}
else {
  element.classList.remove('scroll-active')
}

【讨论】：