只有当表格悬停时才会出现滚动条答案

【问题标题】：Having the scrollbar appear only when the table is hovered on只有当表格悬停时才会出现滚动条
【发布时间】：2019-07-03 12:43:10
【问题描述】：

我正在使用一个简单的antd table。我正在尝试通过应用 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;
}

【问题讨论】：

我在代码沙箱中打开了代码。滚动条仅在悬停在表格上时出现。那么，究竟是什么问题？
@sachinmathew 它总是出现在我面前！
@sachinmathew 您能否建议我可以做些什么来更改滚动条的属性，例如背景颜色和其他属性？我尝试过.ant-spin-nested-loading::-webkit-scrollbar，但没有成功。

标签： javascript css reactjs scrollbar antd

【解决方案1】：

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

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

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

【讨论】：