Центрировать элементы в прокручиваемой области

Question

Как выровнять по центру первый и последний изгибаемые элементы в горизонтальном изгибаемом контейнере с прокруткой?

Получение прокрутки для работы легко.

Мой контейнер имеет:

scroll-snap-type: x mandatory;
overflow-x: scroll;

и элементы имеют:

scroll-snap-align: center;

Прокрутка работает, однако крайний левый и правый элементы в списке всегда выровнены соответственно по левому и правому краям.

Я хотел бы получитьпервый и последний элементы, которые можно центрировать в списке прокручиваемых элементов.

Если мы посмотрим на этот пример "домашней" вкладки - самый левый элемент.Я бы хотел, чтобы это было в центре прокручиваемой области.

Нужно ли иметь пустые вкладки слева и справа от прокручиваемой области?

Спасибо за любой совет.

div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: #777;
}

<div class="scrollmenu">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="#support">Support</a>
  <a href="#blog">Blog</a>
  <a href="#tools">Tools</a>
  <a href="#base">Base</a>
  <a href="#custom">Custom</a>
  <a href="#more">More</a>
  <a href="#logo">Logo</a>
  <a href="#friends">Friends</a>
  <a href="#partners">Partners</a>
  <a href="#people">People</a>
  <a href="#work">Work</a>
</div>

Answer 1

Я получил это для работы с использованием transform3D.Я поместил весь контент в гибкий контейнер и прокрутил весь контейнер с помощью transform3D плюс немного JavaScript.Я вычисляю размер экрана и получаю центр экрана, выполняю некоторые математические операции и вычисляю ширину каждого элемента в контейнере. Зная, что индекс каждого элемента дает мне смещение, которое я сделал, затем сделал анимацию для прокрутки содержимого влево или вправо с помощью transform3d.,

Answer 2

Нужно ли иметь пустые вкладки слева и справа от области прокрутки?

Это неплохая идея.

Вы можете создать кучу«поддельные» элементы на обоих концах, а затем дать им visibility: hidden.

div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: #777;
}

/* NEW */
a:nth-child(-n + 5),
a:nth-last-child(-n + 5) {
  background-color: green;
  visibility: hidden;

<div class="scrollmenu">
  <a href="#home">Home</a>
  <a href="#home">Home</a>
  <a href="#home">Home</a>
  <a href="#home">Home</a>
  <a href="#home">Home</a>
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="#support">Support</a>
  <a href="#blog">Blog</a>
  <a href="#tools">Tools</a>
  <a href="#base">Base</a>
  <a href="#custom">Custom</a>
  <a href="#more">More</a>
  <a href="#logo">Logo</a>
  <a href="#friends">Friends</a>
  <a href="#partners">Partners</a>
  <a href="#people">People</a>
  <a href="#work">Work</a>
  <a href="#home">Home</a>
  <a href="#home">Home</a>
  <a href="#home">Home</a>
  <a href="#home">Home</a>
  <a href="#home">Home</a>
  <a href="#home">Home</a>
</div>

Однако существует более простое и более семантически ценное решение: использовать псевдоэлементы CSS .

Так как вы 'фокусируясь только на внешнем виде макета, вы не должны вмешиваться в HTML.Вы должны придерживаться чистого CSS.

И поскольку псевдоэлементы в флекс-контейнере обрабатываются как флекс-элементы , вы можете использовать ::before (первый элемент в естественном потоке) и::after (последний элемент в естественном потоке), чтобы создать необходимый эффект центрирования.

div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
  display: flex;
}

div.scrollmenu a {
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: #777;
}

/* NEW */
.scrollmenu::before,
.scrollmenu::after {
  content: "";
  flex: 0 0 50%;
}

<div class="scrollmenu">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="#support">Support</a>
  <a href="#blog">Blog</a>
  <a href="#tools">Tools</a>
  <a href="#base">Base</a>
  <a href="#custom">Custom</a>
  <a href="#more">More</a>
  <a href="#logo">Logo</a>
  <a href="#friends">Friends</a>
  <a href="#partners">Partners</a>
  <a href="#people">People</a>
  <a href="#work">Work</a>
</div>