Javascript 仅当表格悬停时才显示滚动条

我正在用一个简单的。我试图通过应用css来改变宽度/显示的滚动条外观。目前，如果您能看到我在这里准备的小演示：

您希望滚动条始终显示如下所示：

我只想在用户将鼠标悬停在表格上时显示滚动条。这样做的方法是什么？我试着玩滚动条的行为，但没有改变（也在链接共享的index.css中）：

当有人在桌子上方悬停时，我怎么可能只有滚动条

为了方便起见，我还在这里分享代码：

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table } from "antd";

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name"
  }
];

const data = [
  {
    key: "1",
    name: "John Brown"
  },
  {
    key: "2",
    name: "Jim Green"
  },
  {
    key: "3",
    name: "Joe Black"
  }
];

function jsx() {
  return (
    <div>
      <Table scroll={{ y: 80 }} columns={columns} dataSource={data} />
    </div>
  );
}
ReactDOM.render(jsx(), document.getElementById("container"));

---

这个CSS应该可以工作，并且它可以兼容多个浏览器，而不仅仅是支持webkit前缀的浏览器

.ant-table-body{
    overflow-y: hidden!important;
}

.ant-table-body:hover{
    overflow-y: scroll!important;
}

---

我已经在codesandbox中打开了代码。滚动条仅在将鼠标悬停在表格上时显示。那么，到底是什么问题呢？@sachinmathew我总是这么想@sachinmathew您能建议我如何改变滚动条的属性，如背景色和其他属性吗？我尝试了

.ant spin嵌套加载：：-webkit scrollbar

，但没有成功。

.ant-spin-nested-loading::-webkit-scrollbar {
   background-color: unset;
   display: block;
   width: 0.1px;
}

.ant-table-body{
    overflow-y: hidden!important;
}

.ant-table-body:hover{
    overflow-y: scroll!important;
}