Page 1 of 1

Mouse Wheel Scrolling in Tablet Template

Posted: Wed Oct 22, 2014 2:47 am
by Brandon nobile

Is there any way to allow scrolling via the mouse wheel in the tablet layout? I can click and drag but I would also like to scroll with the wheel.


Mouse Wheel Scrolling in Tablet Template

Posted: Wed Oct 22, 2014 4:08 am
by Yurii Orishchuk

Hi Brandon,

Please make screen shot of your layout and describe or point the place what you want to wheel by mouse.

Regards.


Mouse Wheel Scrolling in Tablet Template

Posted: Wed Oct 22, 2014 11:08 am
by Brandon nobile

I would like both sides to scroll independently. This app will be a webapp used to view and modify the forms and documents created by our mobile users. Either side could be longer than the view window will allow depending on the datbase results.

Image


Mouse Wheel Scrolling in Tablet Template

Posted: Wed Oct 22, 2014 5:21 pm
by Brandon nobile

Yurii, I was able to get the function I was looking for with the following added to "jquery.mobile.scrollview.css":

.ui-scrollview-clip {overflow-y:auto!important;}
::-webkit-scrollbar { width: 0 !important }

This appears to be working, but is there a better way to do this? Thanks


Mouse Wheel Scrolling in Tablet Template

Posted: Thu Oct 23, 2014 12:47 am
by Yurii Orishchuk

Hi Brandon,

Unfortunatly currently "scrollview" not supports mouse wheel events.

So your solution is ok if it does what you need.

Also you can manage it with JS code but this solution not an easy to implement. For example listen to "mousewheel" event from scroll container and then set appropriate scroll value with this plugin.

Solution for this:

1 Activate page on which you want this behaviour.

2 Add "Page load" event handler.

3 Populate it with following code:

pre

var scrollers = $('.scroller:visible');

var onmousewheel = function(event){
var scroller = jQuery(this);

Code: Select all

 var position = scroller.scrollview("getScrollPosition"); 

 var wheel = event.originalEvent.wheelDelta; 

 position.y =  position.y - wheel; 

 scroller.scrollview("scrollTo", (-1) * position.x, (-1) * position.y); 

};

scrollers.unibnd("mousewheel").bind("mousewheel", onmousewheel)

/pre

Regards