网站做软件有哪些,discuz 做企业网站,珠海网站建设咨询,坪地做网站好久不见~~~
问题场景
根据业务需要#xff0c;对使用到的table组件#xff0c;设置表头固定效果。由于table组件未vue封装组件#xff0c;经过尝试#xff0c;可以通过监听表格容器变化时#xff0c;通过获取对应的thead、tbody#xff0c;并分别设置其对应的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样式
吐槽~~非常规的项目非常规的要求注定会产生一些非常规切奇奇怪怪的解决方案
