Мобильная версияЯ работаю над горизонтальной бесконечной прокруткой с помощью JavaScript. Я хочу, чтобы полная ширина страницы была бесконечной. Проблема в том, что после завершения всех элементов списка иногда появляются пробелы и анимация начинается снова. Я хочу, чтобы этот свиток был бесконечным и не отображал пустое пространство после завершения всех элементов.
В приведенном выше примере ссылки, если я сделаю максимальную ширину класса родительского элемента .scroller равной 600 пикселей, то пустое пространство не будет отображаться после завершения всего элемента, и это будет работать нормально. Но если я сделаю максимальную ширину равной 100vw, пустое пространство будет отображаться после завершения анимации всех элементов.
const скроллеры = document.querySelectorAll(".scroller"); // Если пользователь не включил замедление движения, мы добавляем анимацию if (!window.matchMedia("(предпочитает уменьшенное движение: уменьшить)").matches) { добавитьАнимация(); } функция addAnimation() { Scrollers.forEach((прокрутка) => { // добавляем data-animated="true" к каждому `.scroller` на странице Scroller.setAttribute("анимированные данные", true); // Создаем массив из элементов внутри `.scroller-inner` const ScrollerInner = Scroller.querySelector(".scroller__inner"); const ScrollerContent = Array.from(scrollerInner.children); // Для каждого элемента массива клонируем его // добавляем к нему скрытую арию // добавляем его в `.scroller-inner` ScrollerContent.forEach((item) => { const DupliedItem = item.cloneNode(true); дубликатItem.setAttribute("aria-hidden", true); ScrollerInner.appendChild(duulatedItem); }); }); .scroller { максимальная ширина: 100vw; } .scroller__inner { отступ-блок: 1rem; дисплей: гибкий; flex-wrap: обертка; разрыв: 1рем; } .scroller[data-animated="true"] { переполнение: скрыто; -webkit-mask: линейный градиент( 90 градусов, прозрачный, белый 20%, белый 80%, прозрачный ); маска: линейный градиент (90 градусов, прозрачный, белый 20%, белый 80%, прозрачный); } .scroller[data-animated="true"] .scroller__inner { ширина: максимальное содержимое; гибкая упаковка: nowrap; анимация: прокрутка var(--_animation-duration, 40 с) var(--_animation-direction, вперед) линейная бесконечность; } .scroller[data-direction="right"] { --_animation-direction: обратное; } .scroller[data-direction="left"] { --_animation-direction: вперед; } .scroller[data-speed="fast"] { --_animation-duration: 20 с; } .scroller[data-speed="slow"] { --_animation-duration: 60 с; } @keyframes прокрутка { к { Transform: Translate(calc(-50% - 0,5бэр)); } } /* общие стили */ :корень { --clr-neutral-100: hsl(0, 0%, 100%); --clr-primary-100: hsl(205, 15%, 58%); --clr-primary-400: hsl(215, 25%, 27%); --clr-primary-800: hsl(217, 33%, 17%); --clr-primary-900: hsl(218, 33%, 9%); } html { цветовая гамма: темная; } тело { дисплей: сетка; минимальный размер блока: 100vh; место-содержание: центр; семейство шрифтов: система-ui; размер шрифта: 1.125rem; цвет фона: var (--clr-primary-800); } .tag-список { маржа: 0; заполнение-встроенное: 0; стиль списка: нет; } .tag-list li { отступ: 1рем; фон: var(--clr-primary-400); граница-радиус: 0,5рем; box-shadow: 0 0,5rem 1rem -0,25rem var(--clr-primary-900); } /* для тестирования, чтобы убедиться, что анимация выстроена правильно */ .тест { фон: красный !важно; Анимация бесконечной прокрутки
- HTML
- CSS
- JS
- ССГ
- веб-разработчик
- анимация
- UI/UX
