如何仅在使用 css 溢出时才将垂直滚动条添加到 div 元素?

Question

我想在向div元素添加更多li元素时向div元素添加一个垂直滚动条，换句话说，当div元素溢出时。

下面是 html 代码，

<div className="card">
<form onSubmit={this.handle}>
<div className="top_content">
<div className="title">title</div>
<div className="formats">(.zip)</div>
</div>
<div className="content">
<label>
<div className="add">
<Svg height="17" width="17" />                                    
</div>
<input
type="file"
multiple />
</label>
<div className="content_separator">
<div className="files_list_wrapper">
<ul className="files_list">
{this.state.files.map((f, index) => (
<li key={f.name} className="file_item">
<SvgClose className="icon" height="17" width="17"/>
<span>{f.name}</span>
</li>
))}
</ul>
</div>
</div>
</div>
</form>
</div>

我想要file_list_wrapper分区的滚动条。 我该怎么做。 有人可以帮我吗。谢谢。

Answer 1

您正在寻找overflow-y: auto：

let add = document.getElementsByClassName('add')[0];
let list = document.getElementsByClassName('list')[0];
add.addEventListener('click', () => {
let item = document.createElement('li');
item.textContent = 'hello';
list.appendChild(item);
});

.list {
width: 200px;
height: 100px;
box-shadow: 0 0 0 1px black;
overflow-x: hidden;
overflow-y: auto;
}

<button class="add">Add item</button>
<ol class="list"></ol>