javascript 如何使自动水平滚动在React

p5cysglq 于 2023-05-12 发布在 Java

关注(0)|答案(1)|浏览(131)

我正在做一件小事，我必须让我的divs（卡）滚动水平与动画种没有任何按钮点击。

我努力的目标

我有一些国家的数据，我循环并在屏幕上水平显示
我使用Flex显示来显示它们，当滚动时，溢出滚动被隐藏，并使用下面的代码来自动滚动
我的组件和滚动功能如下

const useAnimationFrame = (callback) => {
 const requestRef = useRef();

 const animate = () => {
   callback();
   requestRef.current = requestAnimationFrame(animate);
 };
 useEffect(() => {
   requestRef.current = requestAnimationFrame(animate);
   return () => cancelAnimationFrame(requestRef.current);
 }, []);
};

function Bubble({ Name, className}) {
 const [position, setPosition] = useState(0);
 console.log(CANVAS_WIDTH);
 useAnimationFrame(() =>
   setPosition((prevPosition) => {
     const newPosition = prevPosition - SCROLL_SPEED;

     return newPosition < -200 ? CANVAS_WIDTH : newPosition;
   })
 );
return (
 <div
 style={{
   transform: `translate(${position}px, 20px)`,
 }}
 className=""

<div className="card m-2 pt-2">
   <div className="py-1">
     <div className="fs-5 mt-2">{Name}</div>
   </div>
 </div>

）;}

所以在上面的代码中，我已经给出了初始位置为，但我下面的代码是从数据中获取的
实际上我的用例有点不同
我几乎完成了代码，但问题是它没有正确滚动，因为我认为我已经与transform或css的一些问题
下面我包括代码和框我做了什么，我的资源我以下

This is what I have done till now
This is what I am following for help

我可以用css或react-hooks的任何其他方法，我在这里寻找最好的方法，这对未来也有帮助请检查代码沙箱
编辑/更新

我更新了两个代码沙盒，第一个是我如何尝试做
我有卡，并显示它水平使用的d-flex的行
现在有很多卡片，所以有滚动的形式，想显示滚动自动，不想滚动点击
另一个代码沙盒
这一个我发现了一个例子，在谷歌上，我正在使用我的帮助，他们显示的形式泡沫这不是我的情况下，但我使用那里的方法
现在只是坚持滚动
请参阅代码沙箱示例以更好地理解

我对任何其他方法都持开放态度，无论是完全使用CSS还是在React中混合使用CSS和JS。

JavaScript

来源：https://stackoverflow.com/questions/76202095/how-to-make-auto-horizontal-scroll-in-react

1条答案

按热度按时间

ryevplcw1#

我已经从javaScript动画切换到CSS动画。App.js:

import { useRef, useEffect, useState, useLayoutEffect } from "react";
import Card from "./Card.js";
import "./styles.css";

export default function App() {
  const ref = useRef(null);
  const [containerWidth, setWidth] = useState(100 + "%");
  const [animationState, setPlay] = useState("paused");
  useEffect(() => {
    if (ref.current) {
      setWidth(ref.current.scrollWidth + "px");
      setPlay("running");
    }
  }, []);
  const renderCards = data.map((el, index) => {
    return <Card key={index} cardName={el.Name} />;
  });

  return (
    <div className="App">
      <div
        className="d-flex"
        ref={ref}
        style={{
          width: `${containerWidth}`,
          animationPlayState: animationState
        }}
      >
        {renderCards}
      </div>
    </div>
  );
}

为卡片创建了另一个组件。Card.js:

import { useRef, useEffect, useState } from "react";
export default function Card({ cardName, refCard }) {
  return (
    <div className="bubble">
      <div className="card m-2 pt-2">
        <div className="py-1">
          <div className="fs-5 mt-2">{cardName}</div>
        </div>
      </div>
    </div>
  );
}

对于CSS，我使用了关键帧和translateX。动画从右侧开始，在左侧结束。为了使d-flex translateX（-100%）的确切宽度与关键帧，我设置其offsetWidth其scrollWidth。

.App {
  overflow: hidden;
}
.card {
  width: 200px !important;
  height: 200px;
  background: #ffffff;
  box-shadow: 0px 1px 4px 1px rgba(158, 151, 151, 0.25);
  border-radius: 15px;
  margin: 12px;
  padding: 12px;
}
.d-flex {
  display: flex;
  transform: translateX(calc(100vw));
  overflow: visible;
  animation: animateContainer 10s linear forwards infinite;
  animation-play-state: paused;
}
@keyframes animateContainer {
  from {
    transform: translateX(calc(100vw));
  }
  to {
    transform: translateX(calc(-100%));
  }
}

codesandbox.io link

赞(0）回复(0）举报 2023-05-12

我来回答

javascript 如何使自动水平滚动在React

1条答案

相关问题

热门标签

最新问答