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

怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《如何使用 overflow: 'auto' 实现超出 DIV 界面的内容滚动展示？》，涉及到，有需要的可以收藏一下

超出 div 界面时的滑条展示

当子组件 <pre>subcontainer</pre> 中的 <pre>data</pre> 内容过多时，它需要通过溢出滚动 <pre>overflow: 'auto'</pre> 来展示。

修改后的代码如下：

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

通过添加 <pre>overflow: 'auto'</pre>，当内容超出 <pre>div</pre> 界面时，它将允许垂直滚动，从而可以上下拖动滑条来展示内容。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《如何使用 overflow: 'auto' 实现超出 DIV 界面的内容滚动展示？》文章吧，也可关注golang学习网公众号了解相关技术文章。