1

I am currently using Brandon Aaron's "jQuery Mousewheel"-script to invert the scrolling direction of a Page. I am very new to jQuery and would like to disable this script on mobile devices / for a resultion < 568px.

The binding of the Mousewheel is done as following:

$(document).ready(function() {
    $('#maincontain').mousewheel(function(e, delta) {
        this.scrollLeft -= (delta * 30);
        e.preventDefault();
    });
});

Any novice help would be very appreciated. Thanks!

benniy
  • 99
  • 7

1 Answers1

0

If all you want it to detect small screens:

if ($(window).width()>=568) { // or any number you like
   // load the mousewheel plugin
}

If what you really want is to detect touchscreens, that's a bit more complicated, but you can start with this:

if (!(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch)) {
   // load the mousewheel plugin
}
Community
  • 1
  • 1
Blazemonger
  • 90,923
  • 26
  • 142
  • 180
  • thanks so much for your help! it's almost working – the only problem is: i would like this script to be disabled on desktop-devices, too, once the screen becomes < 568px. as stated, jQuery is still rocket science for me. currently, your if statement is initialized on page-load, i suppose. is it possible to disable the mousewheel script even after the screen has only been resized? thanks again! – benniy Mar 31 '15 at 14:46
  • (sorry for formulating a wrong question to begin with, as i guess i was asking for mobile devices) – benniy Mar 31 '15 at 14:48
  • There is a [`$(window).resize()` event](http://stackoverflow.com/q/9828831/) you can monitor. However, you'll need to actively destroy the mousewheel plugin when the window gets too small. I would first ask yourself if this is likely to be an issue with real users of your page/site. – Blazemonger Mar 31 '15 at 15:17