У меня есть ul
с max-height
и overflow-y: auto
.
Когда пользователь вводит достаточно элементов li
, ul
начинает прокручиваться, но я хочу, чтобы последний li
с form
в нем всегда присутствовал и просматривался для пользователя.
Я пробовал реализовать функцию scrollToBottom
, которая выглядит так:
scrollToBottom() {
this.formLi.scrollIntoView({ behavior: 'smooth' });
}
Но это просто делает переход ul
в верхнюю часть экрана и показывает li
с формой в нем как единственной видимой.
Есть ли лучший способ сделать это? Ответы, которые я нахожу, как правило, немного старше и используют ReactDOM. Спасибо!
CSS
.prompt-box .options-holder {
list-style: none;
padding: 0;
width: 95%;
margin: 12px auto;
max-height: 600px;
overflow-y: auto;
}
HTML:
<ul className='options-holder'>
{
this.state.items.map((item, index) => (
<li key={item.id} className={`option ${index === 0 ? 'first' : ''}`}>
<div className='circle' onClick={this.removeItem} />
<p className='item-text'>{ item.text }</p>
</li>
))
}
<li key={0} className={`option form ${this.state.items.length === 0 ? 'only' : ''}`} ref={el => (this.formLi = el)}>
<div className='circle form' />
<form className='new-item-form' onSubmit={this.handleSubmit}>
<input
autoFocus
className='new-item-input'
placeholder='Type something and press return...'
onChange={this.handleChange}
value={this.state.text}
ref={(input) => (this.formInput = input)} />
</form>
</li>
</ul>