Прокрутка с помощью тач и курсора | Создание и поддержка сайтов - Марина Сизова - MariSiz
Блог

Опубликовано 20.04.2021

Прокрутка с помощью тач и курсора

Для начала сверстаем горизонтальное меню:

<!-- index.html -->
<menu class="menu">
  <li class="menu-item">
    <a href="#">Новости</a>
  </li>
  <li class="menu-item">
    <a href="#">Проекты</a>
  </li>
  <li class="menu-item">
    <a href="#">Книги</a>
  </li>
  <!-- ... -->
</menu>
/* style.css */
.menu {
  display: flex;
  font: 24px/32px Bureausans, Arial, sans-serif;
}

.menu-item {
  margin-right: 15px;
}
.menu-item:last-child {
  margin-right: 0;
}

Теперь поместим меню в блок с ограниченной шириной и горизонтальной прокруткой:

<!-- index.html -->
<div class="menuLimiter">
  <menu class="menu">
    <li class="menu-item">
      <a href="#">Новости</a>
    </li>
    <li class="menu-item">
      <a href="#">Проекты</a>
    </li>
    <li class="menu-item">
      <a href="#">Книги</a>
    </li>
    <!-- ... -->
  </menu>
</div>
/* style.css */
.menuLimiter {
  width: 350px;
  padding: 0 10px;

  /* Зададим возможность горизонтальной прокрутки */
  overflow-x: scroll;
  /* Для Сафари дополнительно зададим инерцию при прокрутке.
  С инерцией меню будет «оттягиваться» при попытке прокрутить
  его за его пределы. */
  -webkit-overflow-scrolling: touch;
}
/* ... */

При прокрутке появляется горизонтальный скроллбар. В коротком меню он нам ни к чему, спрячем его:

<!-- index.html -->
<div class="menuWrapper">
  <div class="menuLimiter">
    <menu class="menu">
      <li class="menu-item">
        <a href="#">Новости</a>
      </li>
      <li class="menu-item">
        <a href="#">Проекты</a>
      </li>
      <li class="menu-item">
        <a href="#">Книги</a>
      </li>
      <!-- ... -->
    </menu>
  </div>
</div>
/* style.css */

.menuLimiter {
  /* ... */

  /* Добавим дополнительный нижнее поле
  элементу, в котором прокручивается меню */
  padding-bottom: 20px;

  /* С помощью отрицательного отступа
  компенсируем «нарощенное» поле  */
  margin-bottom: -20px;
}
.menuWrapper {
  /* Спрячем всё, что выходит за границы родителя */
  overflow: hidden;
}

Как сделать так, что вот это мобильное меню таскается мышью на десктопе.

За это отвечает микро-библиотека: https://github.com/asvd/dragscroll

Просто добавляете класс dragscroll для блока menuLimiter (в нашем случае).