//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)
<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>
document.querySelectorAll('*').forEach(el => {
if (el.offsetHeight > document.documentElement.offsetHeight) {
console.log('I am higher than my father: ', el);
el.classList.add('higher-class');
}
});
/* 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%;
}
4条答案
按热度按时间uujelgoq1#
CSS不包含此选择。您需要使用JavaScript。
qlzsbp2j2#
没有JavaScript是不可能的
然而,当滚动条可见时,它只需要一行JS来切换CSS类:
字符串
这里有一个演示:
dxpyg8gm3#
对于纯CSS,我对此表示怀疑,但它也不需要很多JavaScript代码,看看这个例子:
检查
abithluo4#
不是一个直接针对具有可见滚动条的元素的特定CSS选择器。但是,您可以使用伪类和兄弟选择器的组合来实现类似的效果。
下面是一个使用
:hover
伪类的示例,仅当与滚动条交互时才将元素作为目标:字符串
这个例子假设你想在滚动条被悬停的时候改变样式。如果你想只在滚动条总是可见的时候应用样式(不仅仅是在交互的时候),在我上次更新的时候没有纯CSS的解决方案。需要JavaScript来动态检查滚动条是否可见并相应地应用样式。
下面是一个使用
offsetHeight
和clientHeight
属性来确定滚动条可见性的JavaScript示例:型
相应的CSS:
型