Hello! 欢迎来到小浪资源网!


div内容超出边界时如何自动显示滚动条?


div内容超出边界时如何自动显示滚动条?

如何实现超出 div 边界时自动展示滑动条?

当子组件 subcontainer 的 props.data 内容过多,超出父组件 div 的界面时,如何添加滚动条以实现上下拖动查看呢?

在 subcontainer 函数返回的 div 样式中,添加一行代码:

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

这样,当子组件内容超出 div 边界时,将会自动展示滑动条,允许用户上下拖动以查看剩余内容。

相关阅读