Question 254828 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Prevent scroll div when wheel a input range

I have a div, fixed height, and scroll.
But inside this div, have an input range. When I fire the wheel event then the scroll of the div is also triggered, so is there any way to block this scrolling while I’m wheeling?

Here is an example of this


import { Box } from "@mui/material";
import { useState } from "react";

export default function App() {
  const [volume, setVolume] = useState(0);
  const onwheelVolumne = (e) => {
    if (e.deltaY < 0) {
      setVolume(volume + 10 > 100 ? 100 : volume + 10);
    } else {
      setVolume(volume - 10 < 0 ? 0 : volume - 10);
    }
    return false;
  };
  return (
    <Box
      border="1px solid #ccc"
      padding={2}
      display="flex"
      flexDirection="column"
      height={200}
      overflow="auto"
    >
      <input type="range" value={volume} onWheel={onwheelVolumne} />
      {Array(10)
        .fill(10)
        .map((i, idx) => (
          <p key={idx}>samnple</p>
        ))}
    </Box>
  );
}

Sandbox: https://codesandbox.io/s/modern-sun-lfyhlr?file=/src/App.js:23-738

Tags:

2

Answers


  1. 0

    I think you can use onMouseEnter and onMouseLeave to toggle the scroll event of parent div:

     const [enableScroll, setEnableScroll] = useState(true);

  return (
    <Box
      border="1px solid #ccc"
      padding={2}
      display="flex"
      flexDirection="column"
      height={200}
      overflow={'auto'}
      onWheel={(e) => {
        if(enableScroll === false) {
          e.preventDefault();
          e.stopPropagation();
        } 
      }}
    >
      <input type="range" value={volume} onWheel={onwheelVolumne} onMouseEnter={() => {
        setEnableScroll(false);
      }} onMouseLeave={() => {
        setEnableScroll(true);
      }}/>
      {Array(10)
        .fill(10)
        .map((i, idx) => (
          <p key={idx}>samnple</p>
        ))}
    </Box>
  );
    Login or Signup to reply.
  2. 0

    Using onMouseEnter to detect and add event to prevent scroll

    const [mouseEnter, setMouseEnter] = useState(false);

  useEffect(() => {
    if (!mouseEnter) {
      return;
    }
    window.addEventListener("wheel", preventScroll, { passive: false });
    return () => window.removeEventListener("wheel", preventScroll, false);
  }, [mouseEnter]);

  const preventScroll = (e) => {
    if (e.preventDefault) {
      e.preventDefault();
    }
    e.returnValue = false;
  };

  return (
    <Box
      border="1px solid #ccc"
      padding={2}
      display="flex"
      flexDirection="column"
      height={200}
      overflow="auto"
    >
      <input
        type="range"
        value={volume}
        onWheel={onwheelVolumne}
        onMouseEnter={() => setMouseEnter(true)}
        onMouseLeave={() => setMouseEnter(false)}
      />
      {Array(10)
        .fill(10)
        .map((i, idx) => (
          <p key={idx}>samnple</p>
        ))}
    </Box>
  );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search