Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.5k views
in Technique[技术] by (71.8m points)

如何实现Ant design 菜单的滚动条效果?

image.png

image.png
如上图所示,是一个Ant design下拉菜单的样式:有一个列表,包含若干条数据,当不滚动的时候滚动条隐藏,当滚动鼠标的时候滚动条显示,停止滚动后消失。

当前我自己的滚动列表是这个亚子,滚动条丑丑的
image.png

demo代码如下,使用::-webkit-scrollbar ::-webkit-scrollbar-track
::-webkit-scrollbar-thumb设置滚动条样式好像没效果,还是我写得有问题?

综上,请问这个需求该怎么实现呢?只实现样式的改变也行!!!
o(╥﹏╥)o

index.ts

import { Card, List} from "antd";
import styles from './styles.less';

const demo:React.FC=()=>{

    const data = [
        '1',
        '1',
        '1',
        '1',
        '1',
        '1',
        '1',
        '1',
        '1',
        '1',
        '1',
        '1',
        '1',
        '1',
        '1',
        '1',
        '1',
        '1',
        '1',
        '1',
      ];

    return (
        <div>
                <Card title='选择列表' className={styles.card} bordered={false}>
                        <List
                            size="small"
                            bordered
                            dataSource={data}
                            renderItem={(item:any) => <List.Item>{item}</List.Item>}
                            className={styles.List}
                        />
                </Card> 
        </div>

    )
}
export default demo

styles.less

.card{
    border-radius: 5px;
    :global{
        .ant-card{
            border-radius: 5px;
        }
        
        .ant-card-head{
            padding: 24px;
            border: none;
            border-radius: 5px;
            height:90px;
            min-height: 90px;
        }

        .ant-card-head-wrapper{
            margin-top: 10px;
        }

        .ant-card-head-title{
            padding:0px;
            color: #1890ff;
            border-radius: 5px;
            font-size: 18px;
        }

      .ant-card-body{
            padding: 0px;
            border-radius: 0px 0px 5px 5px;
            height:473px;
            border-top: 1px solid #f0f0f0;
            overflow-y: scroll;

        }
        
        //设置滚动条样式
        .ant-card-body ::-webkit-scrollbar{
            width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
        }

        .ant-card-body ::-webkit-scrollbar-track{
            box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            background   : #e40d0d;
        }

        .ant-card-body ::-webkit-scrollbar-thumb{
            width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
        }
}

.List{
    border: none ;
    :global{
        .ant-list-item{
            font-size: 18px;
        }

        .ant-list-item:hover{
            background-color: #1890ff;
            border-radius: 0px;
            cursor: pointer;
        }

        .ant-list-split,.ant-list-item{
            border:none
        }
    }

}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...