Question

78

Javascript: Capture mouse wheel event and do not scroll the page?

rated 0 times [ 83] [ 5] / answers: 1 / hits: 52192 / 12 Years ago, wed, april 25, 2012, 12:00:00

I'm trying to prevent a mousewheel event captured by an element of the page to cause scrolling.

I expected false as last parameter to have the expected result, but using the mouse wheel over this canvas element still causes scrolling:

this.canvas.addEventListener('mousewheel', function(event) {

   mouseController.wheel(event);

}, false);

Outside of this canvas element, the scroll needs to happen. Inside, it must only trigger the .wheel() method.
What am I doing wrong?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mckenna

Add To Favorites

Follow

Total Points: 445

Total Questions: 109

Total Answers: 109

Location: Virgin Islands (U.S.)

Member since Sun, May 16, 2021

3 Years ago

mckenna questions

1 Laravel Livewire: Component in Foreach loop. Button Click shows on all items instead of Single item

Mon, Sep 6, 21, 00:00, 3 Years ago

1 Jest mock aws-sdk ReferenceError: Cannot access before initialization

Sat, Apr 11, 20, 00:00, 4 Years ago

1 Nest js POST Request Not Recognizing DTO method

Fri, Mar 20, 20, 00:00, 4 Years ago

1 How to use prop inside another prop as default value in vuejs

Thu, Mar 28, 19, 00:00, 5 Years ago

1 Javascript: Bind/unbind function behavior

Tue, Nov 27, 18, 00:00, 6 Years ago

View All

answered 12 Years ago gageherberth · Accepted Answer

You can do so by returning false at the end of your handler (OG).

this.canvas.addEventListener('wheel',function(event){

    mouseController.wheel(event);

    return false; 

}, false);

Or using event.preventDefault()

this.canvas.addEventListener('wheel',function(event){

    mouseController.wheel(event);

    event.preventDefault();

}, false);

Updated to use the wheel event as mousewheel deprecated for modern browser as pointed out in comments.

The question was about preventing scrolling not providing the right event so please check your browser support requirements to select the right event for your needs.

Updated a second time with a more modern approach option.