html - 如何在紫色卡片上显示滚动条并仅在用户在 React.js 中滚动时显示

Question

如何仅在用户滚动时显示滚动并在紫色卡片上显示滚动仅具有特定设计，如下图所示

我想要的设计

这就是我所做的

我想摆脱右手的那个白色部分并想滚动卡片

这是那个div的代码

 mainDiv:{
    width:'400px',
    minWidth:'400px',
    height: 'calc(100vh - 90px)',
    maxHeight: 'calc(100vh - 90px)',
    overflowY:'auto',
    display:'flex',
    flexDirection:'column',
    margin:'10px 0px 0px 0px',
    borderRadius:'10px',
    backgroundColor:'#fff',
    boxShadow:'0px 2px 4px -1px rgba(0,0,0,0.2)',
    "&::-webkit-scrollbar": {
        width: '11px'
    },
    scrollbarWidth: 'thin',
    scrollbarColor: '#000',
    "&::-webkit-scrollbar-track": {
        backgroundColor: 'transparent'
    },
    "&::-webkit-scrollbar-thumb": {
        backgroundColor:  '#000',
        borderRadius: '6px',
        border: '3px solid #000',
    }

},