如何使用 overflow: 'auto' 实现超出 DIV 界面的内容滚动展示？

超出 div 界面时的滑条展示

当子组件

subcontainer

中的

data

内容过多时，它需要通过溢出滚动

overflow: 'auto'

来展示。

修改后的代码如下：

return (
    <div style={{borderRadius: '8px', border: '2px dashed #333', height: props.height, overflow: 'auto'}}>
        <div style={{ textAlign: 'left' }}>
            <label>{props.title}</label>
        </div>
        <div>
            {props.data.map((item, index) => (
                <div
                    key={`${index}-${item.type}-${item.value} `}
                    style={{
                        float: 'left',
                        display: 'inline-block',
                        borderRadius: '6px',
                        border: '2px solid #000',
                        margin: '8px',
                        padding: '4px',
                        backgroundColor: item.selected ? '#39fe40' : ''
                    }}
                >
                    {item.value}
                </div>
            ))}
        </div>
    </div>
);

通过添加

overflow: 'auto'

，当内容超出

div

界面时，它将允许垂直滚动，从而可以上下拖动滑条来展示内容。

以上就是如何使用 overflow: 'auto' 实现超出 DIV 界面的内容滚动展示？的详细内容，更多请关注硕下网其它相关文章！