Невероятно, чистый css может прокручивать картинки

CSS

Автор этой статьи: Чжан Минь

Исходное заявление: Эта статья подготовлена ​​членами команды интерфейса чтения YFE, пожалуйста, уважайте оригинальность, пожалуйста, свяжитесь с общедоступной учетной записью (id: yuewen_YFE) для авторизации и укажите автора, источник и ссылку.

задний план

традиционныйswiperОн слишком тяжелый, и в нем инкапсулировано множество функций, которые нам не нужны, а простой функции прокрутки не нужен такой тяжелый файл. Вот я и подумал о том, как реализовать это самому, как реализовать наиболее элегантно с наименьшим количеством кода? Можно ли переопределить традиционную реализацию, используя чистыйcssнекоторые специальные эффекты для достижения этого?

Это определенно возможно, я реализовал на основеscroll-snap-typeПрокрутка по свойствам

Реализовать идеи

scroll-snap-type: когда прокрутка контейнера веб-страницы останавливается, он автоматически и плавно определяет указанную позицию указанного элемента.Это немного похоже на то, когда дочерний элемент прокручивается до определенной точки, он будет поглощен родительский элемент. Его цель состоит в том, чтобы прокрутка вашей страницы оставалась в ключевой области, на которой вы хотите, чтобы пользователь сосредоточил внимание. Используя это свойство css, вы можете автоматически определять, куда прокручивается пользователь.

Тогда снова возникает вопрос, как установить эту критическую точку? css дополняют друг друга, мы можем использоватьscroll-snap-align: Когда происходит прокрутка, scroll-snap-type будет прокручиваться в соответствии с критической точкой, установленной scroll-snap-align.Если она не установлена, это не будет иметь никакого эффекта.

图片

scroll-snap-align имеет несколько параметров start, center, end, почувствуйте разницу между ними

прокрутка-щелчок-выравнивание: начало

прокрутка-щелчок-выравнивание: по центру

прокрутка-щелчок-выравнивание: конец ·

Достигается эффект плавного позиционирования в заданную позицию заданного элемента, самый ответственный и важный шаг прокрутки — как сделать так, чтобы элемент прокручивался плавно и медленно? В этот моментscroll-behaviorЭто удобно, его назначение в том, что автоматический эффект вообще не тупит при прокрутке, и у меня как у пользователя отличный опыт.

когда это не работает

после использования

Эффект контраста все еще очень заметен

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

// css
.swiper-box {
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}
.swiper-image {
  scroll-snap-align: start;
}
// js
setInterval(function () {
   var clientWidth = ele.clientWidth;
   var index = Math.floor(ele.scrollLeft / clientWidth) + 1;
   if (index > imageList.length - 1) {
     index = 0;
   }
   eleSwiperBox.scrollLeft = clientWidth * index + _ele.offsetLeft * index;
}, 3000)

Это так просто, несколько строк кода для автоматической прокрутки карусели. Самый элегантный с наименьшим количеством кода, как указано выше. Так ли это закончилось благополучно? Не волнуйтесь, вам нужно смотреть на совместимость браузера, когда вы инвестируете в проект.Если совместимость не очень хорошая, вы не сможете инвестировать в проект.

图片

Браузер Safari его не поддерживает. Это конец. Если он не поддерживается, это равносильно его отсутствию. Если вы хотите использовать его снова, вы можете только написать полифилл.

Давайте подумаем об эффекте поведения прокрутки: smooth;

图片

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

Зная принцип, легко справиться.В случае, если атрибут не поддерживается, мы напишем рекурсивную функцию.ele.scrollLeft не в один шаг, а медленно прокручивает понемногу до конца.

  if (!CSS.supports("scroll-behavior: smooth")) {
     var step = function () {
       var numScrolDistance = scrollLeft - ele.scrollLeft;
       if (Math.abs(numScrolDistance) <= 3) {
         ele.scrollLeft = scrollLeft;
       } else {
        ele.scrollLeft += numScrolDistance / 4;
         requestAnimationFrame(step);
       }
     };
     step();
   } else {
     ele.scrollLeft = scrollLeft;
   }

Напишите ployfill на js, и наша проблема совместимости будет решена. Сочетая в себе несколько свойств css, реализован наш эффект автоматической прокрутки карусели Код очень прост, в основном вы можете использовать и пробовать новые и разные решения css.

Больше, чем просто прокрутка карусели

Если мы не делаем карусельную прокрутку, делать щелчок и медленную прокрутку также очень удобно и просто в использовании.

Подобные ситуации также хороши для использования. Я уже сталкивался с таким спросом в проекте раньше, и эффект относительно тупой, а код не элегантный.Босс CSS сидит и дает указатели, Свойство css, используемое в сочетании с рекурсивной реализацией, особенно интересно.

инкапсуляция кода

Немного инкапсулируйте приведенный выше код, напишите его как компонент и свободно используйте в нашем проекте, один раз инкапсулировав и наслаждаясь им всю жизнь. Все они являются нативными реализациями, без ограничений фреймворка и с совместимой обработкой. Также поставляется с отложенной загрузкой изображений и обработкой исключений.

инкапсуляция кода

  1. Можно установить с помощью npm

npm i snap-swiper

import "snap-swiper/snap-swiper.css";
const snapSwiper = require("snap-swiper");
snapSwiper({
    imageList:[],
    el,
 });

скачать npm с помощью демо

кодовый адрес

Справочная статья

Остановка события прокрутки при прокрутке CSS и определение положения элемента

Герои, пожалуйста, остановитесь, почему бы вам не прийти и не узнать о CSS Scroll Snap?

Категории