e.preventDefault on mousemove not working with niceScroll

Question

This Js fiddle depicts the problem I'm in.

I'm using Nice Scroll plugin in my site. It works fine.

But in one page, I have to show the timeline with width almost 1000px. The client want to scroll down smoothly till the timeline.

When mouse pointer is in the timeline div, the scroll should move horizontally.

I've added this code to the site.

document.getElementById('tl-scroll').addEventListener('mousewheel', function(e) {
  this.scrollLeft -= (e.wheelDelta);
  e.preventDefault();    
}, false);

It seems like the preventDefault not working with nicescroll.

please help me to clear this error.

score 1 · Answer 1 · answered Jul 14 '15 at 06:57

You just need to use use return false; Instead of e.preventDefault();

Try this updated Js code:

$(document).ready(function() { 
    $("html").niceScroll();
}); 

// You missed to close it properly above. Syntax error.      

document.getElementById('tl-scroll').addEventListener('mousewheel', function(event) {
  this.scrollLeft -= (event.wheelDelta);
  console.log('I have stopped it');
  return false; // Instead of e.preventDefault(); you just need to use "return false;"
}, false);
$('#tl-scroll').getNiceScroll().hide();

The Given fiddle by you has console issues and jquery library loading problems. I have fixed it, check out my working fiddle.

I would like to suggest you to use CDN references from HERE for fiddle.

Hope this helps :)

Thats correct, friend. But, is there any way to make it stand still (scroll-y) when scrolling horizontally. — Eugine Joseph, Jul 14 '15 at 07:05
Yes, you need to do additional logic's with appropriate event(s) to prevent that. Check this [QA](http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily). Not sure this will help :( — RajeshKdev, Jul 14 '15 at 07:14

e.preventDefault on mousemove not working with niceScroll

1 Answers1