prevent mouse wheel scroll the web page-CodePudding

i have a web page with canvass and it is used to render 3D scene using threejs, however the canvas is not fullscreen so it has scroll bar since it has some HTML content. how can i prevent mouse wheel from scrolling the page and only handled the mousewheel inside the canvas?

I already did add the preventDefault and stopPropagation on 'wheel' event for the canvas but still the page scrolls.

    canvas.addEventListener( 'wheel', onm ouseWheel, false );

    function onm ouseWheel( event ) {
        event.preventDefault();
        event.stopPropagation();
    }

what else am i missing here?

CodePudding user response：

You could use css, and use

body{
    overflow: none;
}

so the rest of the page will not be visible, and the scrollbar will be hidden.

CodePudding user response：

You will have multiple solution for this case. One would be to use z-index: -1.

canvas.addEventListener( 'wheel', onm ouseWheel, false );

function onm ouseWheel( event ) {
    event.preventDefault();
    event.stopPropagation();
}

div {
  heught:100vh;
  display:flex;
  flex-direction: column;
}
canvas {
  background-color: yellow;
  height:200px;
  z-index:-1;
}
section {
  background-color: lightgreen;
  height:400px;
}

<div>
  <section>A</section>

    <canvas id="canvas">Canvas</canvas>

  <section>B</section>
</div>