如何在反应中按百分比滚动？

Question

我有一个像这样的水平可滚动的 flexbox。

每个框的宽度为 25%。我正在尝试使用按钮左右滚动。现在它像代码中一样滚动 420px，但这会导致响应问题。有什么办法可以在反应中使用“25%”而不是“420”。

const scrollLeftHandler = () => {
    var elmnt = document.getElementById("programCard");
    if (elmnt.scrollLeft !== 0) {
      elmnt.scrollLeft += -420;
      setIsRightSlide(true);
    } else {
      setIsLeftSlide(false);
    }
  };
  const scrollRightHandler = () => {
    var elmnt = document.getElementById("programCard");
    if (elmnt.scrollLeft % 420 === 0 && isRightSlide) {
      console.log("if");
      setIsLeftSlide(true);
      elmnt.scrollLeft += 420;
    } else if (isRightSlide) {
      elmnt.scrollLeft = elmnt.scrollLeft - (elmnt.scrollLeft % 420);
      elmnt.scrollLeft += 420;
      setIsRightSlide(false);
    } else {
      console.log("else", elmnt.scrollLeft);
      setIsRightSlide(false);
    }

Answer 1

你可以使用：

let step = (window.innerWidth || docElem.clientWidth || body.clientWidth)*(25/100)

您可以将420 替换为step。