CSS3 realizes unlimited scrolling / carousel effect of list

Time:2021-7-16

Effect preview

效果预览

thinking

Scrolls the current list to the end of the last item, and then instantly switches back to the first item

Problem points

1. How to achieve unlimited carousel
The problem is that the bottom of the list will be left blank when it scrolls to the end?
stayAt the end of the listadd toDuplicate at the beginning of the listThen (as shown in the figure, 1,2,3,4,5 after 10 are both repetitive items).
The number of duplicate items should be determined according to the height of the current list and the height of the list items, for example:
List height150px, list item height30px, you need to add at the end of the current list150 / 30 = 5Only duplicate items can be removed.

2. How to make the user switch back to the first item without perception
When the list scrolls to the end of the last item (the beginning of the first item of the repeated item), switch immediately. For example:
List item total10Item, move the list up to the10 * 30px = 300pxWhen the switch is started immediately, the senseless switch can be realized

code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    < title > List scrolls infinitely < / Title >
</head>
<style>
    .container {
        position: relative;
        background-color: #a4ffcc;
        /*The parent container needs to have a clear height*/
        height: 150px;
        width: 200px;
        margin: auto;
        overflow: hidden;
    }

    .container > .scroll-list {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        animation: scroll 6s linear infinite normal;
    }

    .container > .scroll-list > div {
        width: 100%;
        /*Rolling items need to have a specific height*/
        height: 30px;
        background-color: #1ea7ff;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
    }

    .container > .scroll-list > div:nth-child(2n) {
        background-color: #18d9f8;
    }

    @keyframes scroll {
        100% {
            /*The total height of the content that needs to be scrolled*/
            top: -300px;
        }
    }
</style>
<body>
    <div class="container">
        <div class="scroll-list">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
            <!--  The following code is to enable the scrolling content to display one more screen (remove the blank space / infinite rotation): please calculate the number according to the height -- >
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
    </div>
</body>
</html>

So far, this article about CSS3 list infinite scrolling / carousel introduces it. For more related CSS3 list scrolling and carousel 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!

Recommended Today

The selector returned by ngrx store createselector performs one-step debugging of fetching logic

Test source code: import { Component } from ‘@angular/core’; import { createSelector } from ‘@ngrx/store’; export interface State { counter1: number; counter2: number; } export const selectCounter1 = (state: State) => state.counter1; export const selectCounter2 = (state: State) => state.counter2; export const selectTotal = createSelector( selectCounter1, selectCounter2, (counter1, counter2) => counter1 + counter2 ); // […]