iScroll隐藏/显示滚动条

Question

I am trying to implement a hover feature on my iScroll div, where I am able to show/hide the scrollbar. I'd like to have the user hover over the div and have the scrollbar appear and once the user moves the mouse off the container the scrollbar disappears.

I've been looking into this to see if its possible but havent had much luck trying to find a solution. I've found that iScroll has a hideScrollbar parameter that I can be set when initializing the new iScroll object but not entirely sure how to dynamically set the parameter based on the users interaction with the scroll container.

Any help would be greatly appreciated.

Answer 1

The below code will give what you want. :) (Tested Desktop & Android & iOS);

hideScrollbar: !isIDevice || isIDevice || isAndroid,
fadeScrollbar: !isIDevice || isIDevice && has3d,

This is the same line with vletech said before 112-113.

Answer 2

I can't seem to find the parameter hideScrollbar as you mentioned above, but an easy way around this would be to add your own fade animation on it.

Eg

$('#DivToHover').hover(
   function(){
      $('#ScrollBarDiv').fadeIn("fast");
   },
   function(){
      $('#ScrollBarDiv').fadeOut("fast");
   }
);

But this might cause some problems if you're expecting this to be viewable on mobile devices.

EDIT

Change line 35 to.

isIDevice = (/iphone|ipad|Mozilla/gi).test(navigator.appVersion),

EDIT 2 Thinking about this again a better way would be to leave line 35 as it is (/iphone|ipad/gi) . But change lines 112 & 133 to ...

hideScrollbar: isIDevice && !isIDevice,
fadeScrollbar: isIDevice && !isIDevice && has3d,