Javascript 滚动条消失在列表下

正如标题所说，我试图用

包装

，但当我将鼠标悬停在上面时，其中一个项目下的滚动条消失了。我没有对它应用任何

css

。这是一个

React

应用程序。有没有办法解决这个问题

下面是来自顶部div的示例代码

import React from 'react';
import { Card, ListGroup, ListGroupItem, Badge, ListGroupItemText } from 'reactstrap';
import { Scrollbars } from 'react-custom-scrollbars';

  <div className="shadow-sm">
    <Card>
      <Scrollbars style={{ width: 350, height: 250 }} >
        <ListGroup>
          <ListGroupItem className="justify-content-between">Cras justo odio <Badge pill>14</Badge>
            <ListGroupItemText>
              Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
            </ListGroupItemText>
          </ListGroupItem>
          <ListGroupItem className="justify-content-between">Dapibus ac facilisis in <Badge pill>2</Badge></ListGroupItem>
          <ListGroupItem className="justify-content-between">Morbi leo risus <Badge pill>1</Badge></ListGroupItem>
          <ListGroupItem className="justify-content-between">Dapibus ac facilisis in <Badge pill>2</Badge></ListGroupItem>
          <ListGroupItem className="justify-content-between">Morbi leo risus <Badge pill>1</Badge></ListGroupItem>
          <ListGroupItem className="justify-content-between">Morbi leo risus <Badge pill>1</Badge></ListGroupItem>
        </ListGroup>
      </Scrollbars>
    </Card>
  </div>

我可以加一个边距，但我不喜欢它的样子。我宁愿将滚动条放在列表的顶部，因为我也可以选择在不滚动时隐藏它。谢谢

---

我已经修复了添加自定义样式的问题，如下所述

//在css中
.拇指垂直{
背景色：rgba（0,0,0,0.6）；
边界半径：3px；
z指数：2；
光标：指针；
}
//组件中
}
> ...

看起来像是悬停时的z索引问题。你能发布CSS吗？@cathryngriffiths我在帖子中添加了CSS。

// scroll-bar
element.style {
    position: relative;
    display: block;
    width: 100%;
    cursor: pointer;
    border-radius: inherit;
    background-color: rgba(0, 0, 0, 0.2);
    height: 161px;
    transform: translateY(26.5865px);

// list-item
.list-group-item {
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.125);
} 

// in css
  .thumb-vertical {
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 3px;
    z-index: 2;
    cursor: pointer;
  }

// in component
<Scrollbars
  renderThumbVertical={props => <div {...props} className="thumb-vertical"/>}
> ...
</Scrollbars>