Как сделать прокрутку списка при нажатии на кнопки и при скролинге. может есть готовые решение или слайдеры?!
1 ответ
let list = (e) => {
let list = e.children[1], step = list.clientHeight;
[...list_1.querySelectorAll("[data-scroll]")].forEach(e => e.addEventListener("click", () => list.scrollTop += Number(e.dataset.scroll) ? step : -step));
}
list(list_1);
.list {
height: 200px;
width: 200px;
overflow: hidden;
}
.list>[data-scroll] {
padding: 10px;
cursor: pointer;
text-align: center;
display: block;
background-color: rgba(0, 0, 0, .05);
-webkit-user-select: none;
}
.list>ul {
list-style: none;
padding: 0px;
margin: 0px;
max-height: calc(100% - 76px);
overflow: auto;
}
.list>ul>li {
padding: 10px;
}
<div class="list" id="list_1">
<span data-scroll="0">up</span>
<ul>
<li>title</li>
<li>title</li>
<li>title</li>
<li>title</li>
<li>title</li>
<li>title</li>
<li>title</li>
<li>title</li>
<li>title</li>
<li>title</li>
<li>title</li>
<li>title</li>
</ul>
<span data-scroll="1">down</span>
</div>