javascript - 只有当表格悬停时才会出现滚动条

Question

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

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

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

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

当有人将鼠标悬停在桌子上时，我怎么能只有滚动条？

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

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;
}

标签： javascriptcssreactjsscrollbarantd

Answer 1

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

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

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