By Zhang Min

Original statement: This article is produced by members of Yuewen front-end team YFE, please respect the original, reprint please contact the public number (ID: yuewen_YFE) for authorization, and indicate the author, source and link.

background

The traditional Swiper is too heavy, packed with features we don’t need, and a simple scrolling feature doesn’t have to be that heavy. So I thought, how can I do that, how can I do it elegantly with the least amount of code? Is it possible to override the traditional implementation and use pure CSS for some special effects?

Sure, I implemented a scroll based on the scroll-snap-type property

Implementation approach

Scroll – snap – type: Web container rolling stop, the automatic smooth positioning to the specified element in the specified location, a bit like a child element will scroll to a certain point of time will be the parent element absorption in the past, its purpose is to make your page scrolling stay you want the user to the focus area, using the CSS properties, which can automatically if the user is to roll

So the question is, how do we set this critical point? CSS properties are complementary. We can use scroll-snap-align: when scrolling-occurs, the scroll-snap-type will scroll according to the critical point set by scroll-snap-align. It has no effect if not set

Scroll-snap-align has several parameters, start, center, end, and feel the difference between them

Scroll – snap – align: start

Scroll – snap – align: center

Scroll – snap – align: end

Smooth positioning to the specified location of the specified element is achieved; The most important part of scrolling is how do you make the elements scroll smoothly and slowly? At this time, Scroll-behavior comes in handy, its purpose is to scroll when the self-driven effect is not stiff, as a user of my experience is excellent

When it’s not useful

After you use it

The contrast is clear

Put the three attributes mentioned above together to achieve a smooth and slow scroll, and then with the help of JS move position our automatic rosette scroll is perfect.

// 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)
Copy the code

It’s that simple, just a few lines of code for rolling autorosette. As mentioned above, with the least amount of code, the most elegant and happy end? Don’t worry, you have to check the compatibility of the browser before you start your project. If the compatibility is not good, you may not be able to work on the project

Safari doesn’t even support it, so it’s over, so if you don’t support it, you don’t have it, and if you want to use it, you just have to write a polyfill

Let’s think about scroll-behavior: smooth; What is the effect of implementation?

It is a slow rolling in the process of rolling, orderly, moving in accordance with a certain step length, as if moving in a straight line with uniform speed

So if you know how it works and if the property doesn’t support it, you write a recursive function, ele. ScrollLeft, instead of doing it all at once, you just scroll a little bit at a time until you’re done.

  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;
   }
Copy the code

By writing a ployfill in JS, our compatibility problem is solved. By combining a few properties of CSS we achieve our automatic rosette scrolling effect. The code is very simple, and the main thing is to try new CSS solutions with different ones.

It’s not just about rolling

And if we’re not doing scroll round, doing slow scroll by click is also a handy property to use.

It’s also easy to use in situations like this. I have encountered this requirement in the project before, the effect is relatively blunt, the code is not elegant, and then there is a CSS master to guide, with CSS attributes combined with recursive implementation, especially interesting

So let’s encapsulate the code

Encapsulate the above code a little and write it as a component, which can be used freely in our project, once encapsulated for life. Both are native implementations, with no framework restrictions and compatible handling. It also comes with lazy image loading and exception handling

Code encapsulation

  1. Can be installed by NPM

npm i snap-swiper

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

NPM download using Demo

The code address

Refer to the article

CSS Scroll-snap stops the scroll event and detects the element position

Warrior, please stay, or come to understand the CSS Scroll Snap?