How to stop page scrolling on a div React

Question

I have a map element using an svg, and have functions to zoom and pan, however the zoom function, which uses the mouse wheel, wont stop the entire page from scrolling when the mouse is inside the map. I have tried to use the e.preventDefault call to stop this, however I keep getting the error Unable to preventDefault inside passive event listener invocation. I have been unable to find a solution to this that works. I know I am probably missing something small, but I have had no success in making it work.

Here is the code minus the stuff inside the SVG as it is too much to fit in the post.

import React, { useEffect, useRef, useState } from 'react'

export default function Map () {

    const [isPanning, setPanning] = useState(false)
    const [map, setMap] = useState()
    const [position, setPosition] = useState({
        oldX: 0,
        oldY: 0,
        x: 0,
        y: 0,
        z: 1,
    })

    const containerRef = useRef()

    const onLoad = (e) => {
        setMap({
            width: 1000,
            height: 1982
        })
    }

    const onMouseDown = (e) => {
        e.preventDefault()
        setPanning(true)
        setPosition({
            ...position,
            oldX: e.clientX,
            oldY: e.clientY
        })
    }

    const onWheel = (e) => {
        if (e.deltaY) {
            const sign = Math.sign(e.deltaY) / 10
            const scale = 1 - sign
            const rect = containerRef.current.getBoundingClientRect()

            console.log(map)

            setPosition({
                ...position,
                x: position.x * scale - (rect.width / 2 - e.clientX + rect.x) * sign,
                y: position.y * scale - (1982 * rect.width / 1000 / 2 - e.clientY + rect.y) * sign,
                z: position.z * scale,
                
            })

            
            
        }
    }

    useEffect(() => {
        const mouseup = () => {
            setPanning(false)
        }

        const mousemove = (event) => {
            if (isPanning) {
                setPosition({
                    ...position,
                    x: position.x + event.clientX - position.oldX,
                    y: position.y + event.clientY - position.oldY,
                    oldX: event.clientX,
                    oldY: event.clientY
                })
            }
        }

        window.addEventListener('mouseup', mouseup)
        window.addEventListener('mousemove', mousemove)

        return () => {
            window.removeEventListener('mouseup', mouseup)
            window.removeEventListener('mousemove', mousemove)
        }
    })

  

    
    
    return (

       
    
        <div className='viewBox'>
        <div
      className="PanAndZoomImage-container"
      ref={containerRef}
      onMouseDown={onMouseDown}
      onWheel={onWheel}
    >
        
        <svg baseProfile="tiny" fill="#7c7c7c" height="1982" stroke="#ffffff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" version="1.2" viewBox="0 0 1000 1982" width="1000" xmlns="http://www.w3.org/2000/svg" onLoad={onLoad}>
            
            
 <g className='regions' style={{
        transform: `translate(${position.x}px, ${position.y}px) scale(${position.z})`,
      }}>  

If anyone knows a solution, any help would be greatly appreciated!

Answer 1

you can try

<YourComponent
onMouseEnter={(e) => {disableScroll.on()}}
onMouseLeave={(e) => {disableScroll.off()}}
/>

use lib from https://github.com/gilbarbara/disable-scroll