How to disable content scrolling?

ionic-v1
12

This is a dirty and terrible hack. It’s laggy and buggy but maybe helps someone. The idea is to detect the vertical scrolling position and scroll the element to that same position, when horizontal drag is detected on an element.

So, this example would disable vertical scrolling, when .horizontally-swiped-element notices horizontal dragging. Here is the HTML stuff…

<div class="horizontally-swiped-element" on-drag-left="disableVerticalScrolling()" on-drag-right="disableVerticalScrolling()">

…and here is the function to disable vertical scrolling, called from the HTML when on-drag-left and on-drag-right are triggered. This can be placed in the controller. And yeah, you can make it directive if you want.

$scope.disableVerticalScrolling = function() {
    var scrollPos = $ionicScrollDelegate.getScrollPosition().top;
    $ionicScrollDelegate.scrollTo(0, scrollPos, false);
}

Any ideas how to improve this workaround’s performance are welcome. Anyway, disabling scrolling shouldn’t happen by scrolling, and it’s what this hack is all about.

I guess that many of us would like to create mobile-Netflix-like UI with horizontally scrolled and dragged elements, so let’s hope someone skillful enough implements the goal of these workarounds as a feature, the way this should be done.

2 Likes