Question

正如标题所述，我尝试用<ListGroup>包装一个<Scrollbars>，但是当我将鼠标悬停在它上面时，滚动条消失在其中一项下面。我没有应用任何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

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

我可以添加边距，但我不喜欢它的外观。我希望滚动条位于列表的顶部-因为我也可以选择在不滚动时将其隐藏。谢谢

Answer 1

我已修复它添加自定义样式，如此处所述https://github.com/malte-wessel/react-custom-scrollbars/blob/master/docs/customization.md

conda:
        "Env2.yaml" # used for running pysam

run:
        import pysam
        import sys
        import os
        .
        .
        .
        .

滚动条消失在列表下

1 个答案: