How to scroll by percentage in react?-CodePudding

I have a horizontally scrollable flexbox like this. Each box width is 25%. I'm trying to scroll left and right using buttons. Now it scrolls by 420px as in the code, But this causes responsive issues. Is there any way to use "25%" instead of "420" in react.

    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);
        }

https://i.stack.imgur.com/gDpss.png

CodePudding user response：

You can use:

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

You can replace 420 with step.