The project used a running component (support text, pictures of seamless scrolling), did not find open source suitable components, simply their own implementation.

Implementation principle:

Use the two attributes of the HTML element: scrollLeft and scrollWidth.

  1. ScrollLeft: Reads or sets the distance of the element’s scroll bar to the left of the element.

  2. ScrollWidth: Read-only attribute, which is a measure of the content width of an element, including content that is not visible on the screen due to overflow

Simply get the scrollWidth of the scrollelement and set the scrollLeft value repeatedly.

show you my code:

👇 here is the running lamp component:

<template> <div class="show-area" :style="{ width: `${width}px`, height: `${height}px` }"> <div class="scroll-area"> <! <div class="slot-container" :style="{margin: 0; `0 ${width}px` }"> <slot></slot> </div> </div> </div> </template> <script lang="ts"> import Vue, {PropType} from 'vue' export default vue. extend({prop: {prop: {prop: {prop: {prop: {prop:}) Height: {type: Number, default() {return 400}}, // Mounted {// In the mounted phase, const showArea () = const showArea (); // In the mounted phase, const showArea () = const showArea (); Any = document.querySelector('.show-area') // Scroll left to right, Showarea. scrollLeft = showarea. scrollWidth function f() {// If the scrollbar is to the left of the element, If (showarea. scrollLeft < 3) {showarea. scrollLeft = showarea. scrollWidth} else {// Move the scrollbar 2 to the left each time, Const speed = 2 showarea.scrollLeft -= speed} // Use requestAnimationFrame, </script> <style = "box-sizing: border-box! Important; word-break: inherit! Important; word-break: inherit! Important; word-break: inherit! Important; lang="scss" scoped> .show-area { // height: 50px; display: inline-block; white-space: nowrap; overflow: hidden; .scroll-area { display: inline-block; .slot-container { display: inline-block; } } } </style>Copy the code

👇 here’s a demo:

<template> <div class="carousel-c"> <Carousel> <div v-for="item in items" :key="item"> {{ item }} </div> </Carousel> </div> </template> <script lang="ts"> import Vue from 'vue' import Carousel from '@components/common/carousel/carousel' export default Vue.extend({ components: { Carousel }, data() { return { items: Text [' 1 ', '2' words, '3', 'text 4', '5' words, 'text 6']}}}) < / script > < style scoped lang = "SCSS" > < / style >Copy the code