Sample code for seamless scrolling with flex layout

Time:2021-1-21

This paper mainly introduces the sample code of realizing seamless scrolling with flex layout, which is shared with you as follows:

Demonstration of cases

Flex layout

The so-called flex layout is elastic box layout, which is commonly used in mobile terminals. However, with the update of browser version, flex layout is increasingly used because of its own advantages.

Thinking:

  • First of all, analyze the structure of this small demo, the upper and lower structure. We can use a container to wrap it (the so-called big box).
  • The top is a navigation, the top is a UL, below we can use two div, 100% of the width, height custom.
  • Next, let’s open and model, remember a certain parent box! display:flex; How to divide up and down? If you continue to add flex Wrap: wrap; that is, the upper and lower parts are separated, is it very convenient.
  • The next part is the following part. UL is nested in div, and the height of UL is easy to understand. It is the height of div, so how wide is UL? , can be infinitely wide!!! Let’s make UL 3000 PX wide
  • Let’s put Li next. You can see that the structure in Li is also up and down, so, hehe! Li do you want to open flex too? Flex Wrap: wrap;. The top div is img, and the bottom is a tag.
  • Remember to float with Li! And consider overflow: hidden

Animation effect

  • We have five pictures, and we’re going to move it from right to left. So we call it UL mobile. Can we drive Li Mobile.
  • We use @ keyframes to change the value of UL’s left, but there’s a problem. I put five pictures, UL moves, and the right side is empty. What should I do???
  • Can we copy five Li at the back and put them at the back. The answer is yes!! When our left just removes the first group of Li, the second group just comes up. So, let’s just use animation: run 20s linear infinite; infinite loop.

CSS part code


* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

.box-big {
    position: absolute;
    display: flex;
    left: 50%;
    top: 50%;
    border: 1px solid #9FD6FF;
    transform: translate(-50%, -50%);
    width: 707px;
    height: 170px;
    /* background-color: pink; */
    flex-wrap: wrap;
    overflow: hidden;
}

.box-top {
    width: 707px;
    height: 30px;
    border-bottom: 1px solid #9FD6FF;
    background-color: #FEFEFE;
}

.div-bottom {
    width: 707px;
    height: 136px;
    /* background-color: darkgoldenrod; */
    overflow: hidden;
}

.st-icon-android {
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url(../img/hd.gif);
    margin: 8px;
}

h5 {
    position: absolute;
    top: 6PX;
    left: 30px;
    color: #307DD1;
}

ul {
    position: absolute;
    left: 90px;
    width: 3000px;
    height: 100%;
    animation: run 20s linear infinite;
}

li {
    list-style: none;
    float: left;
    width: 140px;
    height: 100%;
    margin: 0 5px 0 5px;
    /* background-color: gold; */
    flex-wrap: wrap;
}

.photo {
    margin-top: 5px;
    width: 140px;
    height: 105px;
    text-align: center;
    /* background-color: springgreen; */
}

p {
    text-align: center;
}

img {
    cursor: pointer;
}

@keyframes run {
    0% {
        left: 0;
    }
    100% {
        left: -745px;
    }
}

So far, this article about the flex layout to achieve seamless scrolling sample code is introduced here. For more related flex seamless scrolling content, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!