2

введите сюда описание изображения Как сделать прокрутку списка при нажатии на кнопки и при скролинге. может есть готовые решение или слайдеры?!

1 ответ 1

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>

2
  • спасибо как можно сделать тоже самое только еще для субменю
    – Roman
    4 сен 2017 в 11:12
  • @Roman это уже другой вопрос
    – webDev_
    4 сен 2017 в 11:22

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.