CSS有滚动条选择器吗？仅具有可见滚动条的目标元素

Question

我想要仅使用CSS来定位具有可见滚动条的元素.这可能没有JavaScript吗？

例如,如果我有3个div设置样式overflow-y:auto,如何仅在滚动条出现时更改它们的样式？

Answer 1

CSS不涵盖此选择。您需要使用JavaScript。

Answer 2

没有 JavaScript 是不可能的

然而，当滚动条可见时，只需要一行 JS 即可切换 CSS 类：

el.classList.toggle("scrollbarOn", el.scrollHeight > el.clientHeight)

这是一个演示：

el.classList.toggle("scrollbarOn", el.scrollHeight > el.clientHeight)

//toggles a class on an element when the scrollbar is visible:
function updScrollClass(el) {
  return el.classList.toggle("scrollbarOn", el.scrollHeight > el.clientHeight)
}
//changes the height of myDiv every second:
setInterval(function(){
  var myDiv = document.getElementById('myDiv')
  myDiv.classList.toggle('tall')
  updScrollClass(myDiv)
},1000)

#myDiv{ 
  width:150px;
  height:200px;
  overflow:auto;
}

#myDiv.tall{
  height:300px;
}

.scrollbarOn{ 
  background:yellow;
}