Ich möchte nur mit CSS auf Elemente abzielen, die eine sichtbare Bildlaufleiste haben. Ist das ohne Javascript möglich?
Zum Beispiel, wenn ich 3 Divs mit gestylt habe overflow-y:autoWie ändere ich die Stile für sie erst, wenn ihre Bildlaufleiste angezeigt wird?
CSS deckt diese Auswahl nicht ab. Sie müssen JavaScript verwenden.
Bei reinem CSS bezweifle ich es, aber es erfordert auch nicht viel Javascript-Code, schauen Sie sich dieses Beispiel an:
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>
Cronoklee
Ohne Javascript geht es nicht
Es ist jedoch nur eine einzige Zeile JS erforderlich, um eine CSS-Klasse einzuschalten, wenn die Bildlaufleiste sichtbar ist:
el.classList.toggle("scrollbarOn", el.scrollHeight > el.clientHeight)
Hier ist eine Demo:
//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>
Ich glaube nicht, dass das möglich ist, aber ich würde gerne eines Besseren belehrt werden
– Jonas Grumann
29. Juni 2015 um 11:49
Ich denke, das ähnelt dem Fragen-Link. Es scheint nicht möglich zu sein, nur CSS zu verwenden
– KAD
29. Juni 2015 um 11:50 Uhr
Nicht mit reinem CSS. Ich weiß, dass Sie Nein JS gesagt haben, aber das könnte nützlich sein, wenn Sie Ihre Meinung ändern stackoverflow.com/questions/4814398/…
– Equalsk
29. Juni 2015 um 14:12
Ich nehme an, dass es nicht möglich wäre, Elemente zu formatieren, je nachdem, ob eine Bildlaufleiste vorhanden ist oder nicht. Stellen Sie sich das Szenario vor, in dem Sie bei einer Bildlaufleiste die Höhe der darin enthaltenen Elemente ändern, sodass die Bildlaufleiste entfernt wird, sie dann ihre ursprüngliche Höhe erreichen, die Bildlaufleiste angezeigt wird und so weiter …
– xpy
29. Juli 2016 um 8:36 Uhr