前两天遇到一个问题,再给一个el-table表格设置左侧几个固定列后,发现横向滚动条在固定列下方的位置无法拖动,只有在非固定列的下方位置才可以拖动,这个问题在windows上用鼠标难以点击滑动,我在mac上由于使用触摸板滑动较多基本不会出现这个问题。
问题出现原因:固定列将下方的滚动条盖住了,无法点击到滚动条触发滚动。
初步解决方法:改变固定列高度,使滚动条暴露出来
// 用于消除固定列下方的伪元素边框线
/deep/ .table {
.el-table__fixed:before {
height: 0px;
}
}
// 由于windows和mac两端系统不一致,el-table滚动条样式渲染的也不同,mac的滚动条要比windows的窄一些,我这边做了高度差
/*CSS 本身不能检测操作系统,但可以检测浏览器的引擎。Mac 和 Windows 的默认浏览器(Safari 和 Edge/Chrome)使用不同的引擎(WebKit 和 Blink),可以利用 @supports 规则来实现不同样式。不过,这种方法不是完全可靠,因为它依赖于特定的引擎行为。*/
/* 针对 WebKit 浏览器 (可能是 Windows) */
@supports (-webkit-touch-callout: none) {
/deep/ .table .el-table__fixed {
height: calc(100% - 20px) !important;
}
}
/* 针对非 WebKit 浏览器 (可能是 Mac) */
@supports not (-webkit-touch-callout: none) {
/deep/ .table .el-table__fixed {
height: calc(100% - 12px) !important;
}
}
/*----------------------------第二个方法(更可靠些)----------------------------------*/
// 借助 JavaScript 来检测用户的操作系统,并动态添加对应的类名,然后在 CSS 中针对这些类名进行样式控制。
// 这段代码会在页面加载完成后,检测用户的操作系统。如果是 Mac 系统,会在 body 元素上添加 mac-os 类;如果是 Windows 系统,则添加 windows-os 类。
// 页面加载完成后执行检测函数
mounted(){
window.onload = detectOSAndAddClass;
}
methods:{
...
// 检测操作系统并添加相应的CSS类名
function detectOSAndAddClass() {
const userAgent = window.navigator.userAgent;
const isWindows = userAgent.indexOf("Windows") !== -1;
const isMac = userAgent.indexOf("Macintosh") !== -1;
if (isWindows) {
document.documentElement.classList.add('windows-os');
} else if (isMac) {
document.documentElement.classList.add('mac-os');
}
}
...
}
<style>
...
// 用于消除固定列下方的伪元素边框线
/deep/ .table {
.el-table__fixed:before {
height: 0px;
}
}
/* Windows 系统的样式 */
.windows-os /deep/ .scrollBar .el-table__fixed {
height: calc(100% - 20px) !important;
}
/* Mac 系统的样式 */
.mac-os /deep/ .scrollBar .el-table__fixed {
height: calc(100% - 12px) !important;
}
...
</style>