Enable Scroll on classic Browser

ionic-v1
1

Hi there!
I am new to the ionic community (and angularJS btw), gotta say thumbs up to the ionic team. Great work guys!

I am developping a small web app that will sometimes be accessed by desktop web browser. Everything works great for now (take a sneak peak at http://mobilevinify.herokuapp.com/#/vinibar) but I was wondering I there was a way to enable mouse scrolling.

Cheers,

Félix

2

Hey Félix,

You could try using the overflow scrolling instead:

<content overflow-scroll="true"></content>

Which will enable normal scrolling on desktop and also the native browser scrolling on mobile. The downside is we don’t have pull to refresh support for that and some future features will depend on custom scrolling (due to limitations in the -webkit-overflow-scrolling: touch.

However, I need to add mousewheel support to the scroll system which should make it work fine with the mouse wheel and also OS X flick scrolling.

5 Likes
3

Thanks for the answer, I also found this information useful.

I will have to use this overflow-scroll attribute, as the application I’m developing probably will be shown in a webpage.
Would you mind telling which other features will be depending on custom scrolling? Just for making sure the app is not getting crippled by this.

4

Any luck with adding mousewheel support to the build-in scroll?

5

Hey guy,
This because the mouse wheel of some browsers don,t trigger mouse wheel in ionic bundle.js // self.mouseWheel
see: http://www.javascriptkit.com/javatutors/onmousewheel.shtml

so I have correct the code that can be scroll vertical in firefox :
self.mouseWheel = ionic.animationFrameThrottle(function(e) {
var scrollParent = ionic.DomUtil.getParentOrSelfWithClass(e.target, ‘ionic-scroll’);
if (scrollParent === self.__container) {
self.hintResize();

      var positionY = (e.detail)?-e.detail*(-120):e.wheelDeltaY;
      
        self.scrollBy(
          e.wheelDeltaX/self.options.wheelDampen,// this may be wrong when scroll horizontal
          positionY/self.options.wheelDampen 
        );                      
      

      self.__fadeScrollbars('in');
      clearTimeout(self.__wheelHideBarTimeout);
      self.__wheelHideBarTimeout = setTimeout(function() {
        self.__fadeScrollbars('out');
      }, 100);
    }
  });
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x

  container.addEventListener("mousedown", self.mouseDown, false);
  document.addEventListener("mousemove", self.mouseMove, false);
  document.addEventListener("mouseup", self.mouseUp, false);
  document.addEventListener(mousewheelevt, self.mouseWheel, false);
}

},

Hope ionic can solve it in next version

1 Like