How to scroll by percentage in react?

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://magenaut.com/wp-content/uploads/2022/11/gdpss.png

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You can use:

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

You can replace 420 with step.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0