Центрировать элементы в прокручиваемой области
Как вы выравниваете по центру первый и последний элементы гибкости в прокручиваемом горизонтальном гибком контейнере?
Получить прокрутку до работы очень просто.
В моем контейнере есть:
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>
Ответы 2
Do I need to have blank tabs on the left and right of the scrollable area?
Это неплохая идея.
Вы можете создать кучу «фальшивых» элементов на обоих концах, а затем дать им 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>Я получил это для работы с помощью transform3D. Я поместил все содержимое в гибкий контейнер и прокрутил весь контейнер с помощью transform3D плюс некоторый javascript. Я вычислил размер экрана и получил центр экрана, провел некоторые математические вычисления и вычислил ширину каждого элемента в контейнере и зная, что каждый индекс элементов дал мне смещение, которое я сделал, затем сделал анимацию для прокрутки содержимого влево или вправо с помощью transform3d .