【2023-10-23】$(‘xx‘).css()方法设置元素css样式问题随记

好久不见~~~

问题场景

根据业务需要，对使用到的table组件，设置表头固定效果。由于table组件未vue封装组件，经过尝试，可以通过监听表格容器变化时，通过获取对应的thead、tbody，并分别设置其对应的css样式属性来实现。

鉴于要对DOM元素进行样式设置，所有想到了使用jQuery获取DOM元素，并通过$('xx').css()方法来设置css样式的方法。由于table的最小宽度问题，导致容器太小时出现横向功能点，原始的滚动条比较丑，所有想着改变原始滚动条的样式。
希望通过类似如下样式，实现预期效果，但发现$('xx').css()方法对如下属性不生效

scrollbar-width: thin; /* 设置滚动条宽度 */
scrollbar-color: transparent transparent; /* 设置滚动条颜色 */

问题原因

Q:$('xx').css()是否支持设置滚动条显示为透明?

A:$('xx').css() 是jQuery的CSS设置方法，它用于更改元素的CSS属性。在jQuery中，你可以使用这个方法来设置元素的CSS属性，但要注意，不是所有的CSS属性都可以通过jQuery的css()方法来设置。

滚动条的样式（例如滚动条的颜色、滚动条的宽度等）通常不是通过标准的CSS属性来设置的，因此css()方法通常无法用于直接更改滚动条的样式。

要自定义滚动条的样式，你需要使用CSS的伪元素（如::-webkit-scrollbar）或JavaScript和CSS库（如PerfectScrollbar、mCustomScrollbar）等方法，因为不同浏览器可能支持不同的自定义滚动条样式。

修复方案

综合考虑后，还是采用vue中解决样式问题比较常见的样式穿透的方案来解决。

• 页面中定义（或选择）一个唯一标识的id，用于查找元素
• 使用v-deep样式穿透，选择对应的table元素
• 设置滚动条横向滚动条的css样式

吐槽~~非常规的项目+非常规的要求注定会产生一些非常规切奇奇怪怪的解决方案