el-table表设置固定列后，滚动条无法选中左右滑动

前两天遇到一个问题，再给一个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>