我正在尝试创建一个文本区的滚动条和大小的自定义样式。 Resizer应该根据滚动条是否可见有两种样式。
这就是缩放器现在的样子:
通过使用webkit-resizer向Resizer添加边框来应用Resizer样式
&::-webkit-resizer {
border-right: 20px solid #c1c1c1;
border-top: 20px solid #dddddd;
}
我希望根据滚动条的可见性更改border-top的颜色。 滚动条不可见时为白色/透明，滚动条可见时为#ddd。
使用resizeobserver()
ResizeObserver接口报告元素内容或边框的维度变化，或者SVGElement的边界框的维度变化。
null
const textbox = document.querySelector('textarea')
new ResizeObserver(function() {
textbox.classList.toggle('scrollable', textbox.scrollHeight > textbox.clientHeight)
}).observe(textbox)textarea::-webkit-resizer {
border-right: 20px solid #c1c1c1;
border-top: 20px solid #dddddd;
}
textarea.scrollable::-webkit-resizer {
border-right: 20px solid #dddddd;
border-top: 20px solid #c1c1c1;
}
textarea::-webkit-scrollbar {
background-color: #dddddd;
}
textarea::-webkit-scrollbar-thumb {
background-color: #c1c1c1;
}<textarea>
A
B
C
D
E
F
</textarea>