Создание горизонтальных прокручивающих контейнеров в правильном направлении [CSS Grid]

соображения UX

Я не буду углубленно обсуждать аспекты горизонтальной прокрутки UX; однако, при использовании горизонтальной прокрутки, кажется, что должны быть выполнены по крайней мере два принципа UX:

1. . В вашем дизайне должен быть визуальный намек на то, что набор контента горизонтально прокручивается. Лучший способ сделать это — разрешить часть прокручиваемого содержимого.
2. Важно, чтобы пользователь знал, когда заканчивается прокрутка. Мы заметили, что пользователи повторяют операцию прокрутки, потому что считают, что они не прокрутили достаточно в предыдущей попытке.

Обозначение макета

Прежде чем мы начнем, давайте набросим макеты, которые мы хотим выполнить:

• Контейнер для прокрутки должен следовать общей компоновке страницы — т. е. соблюдение полей и отступов
• Часть прокручиваемого содержимого должна заглядывать из края
• . Содержимое контейнера должно скользить с краев экрана при прокрутке
• Водосточный желоб между содержимым должен быть меньше, чем у краев, так что на обоих концах контейнера будет больше места (указывая пользователю, что они прокручиваются до конца)

Итак, что-то вроде этого:

Notice, что на обоих концах горизонтального прокручивающего контейнера имеется равное количество пространства, соответствующее окружающему

Общая компоновка

Теперь, когда у нас есть фундаментальное понимание функций, которые мы хотим использовать в нашем горизонтальном контейнере прокрутки, давайте посмотрим, как мы можем его кодировать с помощью CSS Grid , Удобная вещь в CSS Grid заключается в том, что мы можем легко управлять канавкой между элементами без дальнейших вычислений.

Для общей компоновки мы будем использовать простую, но мощную технику CSS Grid:

. app {
 display: grid; 
 grid-template-columns: 20px 1fr 20px; 
} 

 .app> * {
 grid-column: 2 / -2; 
} 

 .app> .full {
 grid-column: 1 / -1; 
} 

Любые прямые дети из .app будут быть «контейнерным» с 20px зазором на обоих концах, сохраняя содержимое с краев. Если ребенок оборудован классом .full он будет охватывать весь видовой экран без каких-либо дополнений на стороне (ака. Полное кровотечение).

Прокручивающийся контейнер

Создадим горизонтальный прокручивающийся контейнер с шестью картами, показывающий по два за раз. Поскольку мы хотим, чтобы контейнер горизонтальной прокрутки соответствовал общей компоновке с дополнением с обеих сторон, мы опускаем класс .full и можем попробовать что-то вроде этого:

 .hs {
 display : сетка; 
 сетчатая щель: 10 пикселей; 
 grid-template-columns: repeat (6, calc (50% - 40px)); 
 grid-template-rows: minmax (150px, 1fr); 
} 

Используя grid-template-columns мы можем настроить, сколько места мы хотим, чтобы каждая карта должна была занимать — в этом примере карты занимают 50% окна просмотра ,

. Однако, когда вычитание желоба, вычитая сточную канаву, как вы могли заметить — карты обрезаны с обоих концов. Помните, мы хотим, чтобы прокручиваемый контент скользил по краям экрана при прокрутке.

 .hs {
 дисплей: сетка; 
 сетка-зазор: 10 пикселей; 
 grid-template-columns: repeat (6, calc (50% - 40px)); 
 grid-template-rows: minmax (150px, 1fr); 
  padding: 0 20px; 
 } 

 .hs> li: last-child {
 margin-right: 20px; 
} 

 .hs {
 display: 
 сетчатый зазор: 10px; 
  grid-template-columns: repeat (6, calc (50% - 40px));  
 grid-template-rows: minmax ( 150px, 1fr),  
 } 

 .hs {
 дисплей: сетка; 
 сетчатая щель: 10 пикселей; 
 сетка-шаблон-столбцы: 
  10px 
  повтор (6, вычислено (50% - 40px)) 
  10px 
 template-rows: minmax (150px, 1fr);  
 } 

 .hs :: before, 
 .hs :: after {
 content: ''; 
} 

 grid-template-columns: 
 10px  
  repeat  6 calc (50% - 40px)) 
 10px; 

 var root = document.documentElement; 
 const lists = document.querySelectorAll ('. hs'); 

 lists.forEach (el => {
 const listItems = el.querySelectorAll ('li') 
 const n = el.children.length; 
  el.style.setProperty ('- total', n);  
}) 

 grid-template-columns: 
 10px  
  repeat ( var (- total) calc (50% - 40px)) 
 10px; 

 .hs {
 ... 
 grid-template-columns: 10px; 
  grid-auto-flow: column;  
   ... 

 .hs: before, 
 
 ...  .hs: after {
 content: ''; 
  width: 10px;  
}