html CSS has-scrollbar selector-仅针对具有可见滚动条的元素

yptwkmov  于 11个月前  发布在  其他
关注(0)|答案(4)|浏览(185)

我想目标元素有一个可见的滚动条只使用CSS。这是可能没有JavaScript?
例如,如果我有3个div的样式为overflow-y:auto,我如何改变他们的样式,只有当他们的滚动条已经出现?

uujelgoq

uujelgoq1#

CSS不包含此选择。您需要使用JavaScript。

qlzsbp2j

qlzsbp2j2#

没有JavaScript是不可能的

然而,当滚动条可见时,它只需要一行JS来切换CSS类:

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;
}
<div id='myDiv' class='tall'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc convallis nisl in accumsan porta. Etiam in urna orci. Vestibulum elementum, velit ac vestibulum efficitur, est elit auctor massa, nec porta ante nunc eget tellus. Integer eu ligula felis. 
</div>
dxpyg8gm

dxpyg8gm3#

对于纯CSS,我对此表示怀疑,但它也不需要很多JavaScript代码,看看这个例子:

document.querySelectorAll('*').forEach(el => {
  if (el.offsetHeight > document.documentElement.offsetHeight) {
      console.log('I am higher than my father: ', el);
      el.classList.add('higher-class');
  }
});
.higher-class {
  color: red;
}
<div class="container" style="height:50px;">
  <div class="some-child"  style="height:100px;font-size: 5rem">
    Higher element
  </div>
</div>

检查

abithluo

abithluo4#

不是一个直接针对具有可见滚动条的元素的特定CSS选择器。但是,您可以使用伪类和兄弟选择器的组合来实现类似的效果。
下面是一个使用:hover伪类的示例,仅当与滚动条交互时才将元素作为目标:

/* Initially, style the element with overflow-y: auto */
div {
  overflow-y: auto;
  /* Your other styles */
}

/* When the scrollbar is being hovered */
div:hover {
  /* Apply styles for when the scrollbar is visible */
  /* For example, you could increase the width of the container */
  width: 150%;
}

字符串
这个例子假设你想在滚动条被悬停的时候改变样式。如果你想只在滚动条总是可见的时候应用样式(不仅仅是在交互的时候),在我上次更新的时候没有纯CSS的解决方案。需要JavaScript来动态检查滚动条是否可见并相应地应用样式。
下面是一个使用offsetHeightclientHeight属性来确定滚动条可见性的JavaScript示例:

document.addEventListener('DOMContentLoaded', function () {
  var elements = document.querySelectorAll('div');

  elements.forEach(function (element) {
    if (element.scrollHeight > element.clientHeight) {
      // Apply styles for visible scrollbar
      element.classList.add('visible-scrollbar');
    }
  });
});


相应的CSS:

.visible-scrollbar {
  /* Styles for elements with visible scrollbar */
  /* For example, you could increase the width of the container */
  width: 150%;
}

相关问题