Наличие полосы прокрутки появляется только тогда, когда таблица находится на

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

Answer 1

Этот CSS должен работать, и он будет совместим с несколькими браузерами, а не только с теми, которые поддерживают префиксы webkit.

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

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