React 中如何让超出 div 界面后启用可上下拖动滑条？-css教程-PHP中文网

React 中如何让超出 div 界面后启用可上下拖动滑条？

花韻仙語

发布： 2024-11-11 09:24:24

原创

1161人浏览过

react 中如何让超出 div 界面后启用可上下拖动滑条？

react 中超出 div 界面并启用滑条滚动

在 react 中，当某个元素的内容超出父元素的边框时，可以使用 overflow 属性来控制它的显示方式。下面是如何让超出 div 界面后启用可上下拖动滑条：

在 subcontainer 组件中，添加以下样式：

码上飞

码上飞（CodeFlying）是一款AI自动化开发平台，通过自然语言描述即可自动生成完整应用程序。

138

查看详情

overflow: 'auto'

登录后复制

更新后的代码如下：

import React from 'react'

export type ItemType = {
    type: "property" | "method",
    value: string,
    selected?: boolean    
}

export type SubContainerProps = {
    height?: number,
    title: string,
    data: ItemType[], // 这个是items
}

export default function subContainer (props: SubContainerProps){ 

   

    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'，如果子元素超出父元素，将显示垂直滚动条，允许用户滚动查看剩余内容。

以上就是React 中如何让超出 div 界面后启用可上下拖动滑条？的详细内容，更多请关注php中文网其它相关文章！