javascript - 仅当表格悬停时才出现滚动条

Question

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

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

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

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

当有人悬停在 table 上时，我怎么可能只有滚动条？

为了方便，我也在这里分享代码:

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:

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

Answer 1

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

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

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