Nativescript: how to programmatically disable / enable ScrollView scrolling?

Question

Is there a way to programatically disable/enable ScrollView scrolling in NativeScript?

Answer 1

Ok, I found how to do that. It's actually pretty easy on iOS:

var scrollView = page.getViewById('YOUR_VIEW_ID')
scrollView.ios.scrollEnabled = false // to disable
scrollView.ios.scrollEnabled = true  // to enable back

Android:

Also for my particular case, where I need to disable scrolling of the Scroll View, but drag and drop child views inside. On subview start dragging (panning) event we prevent touch events interception in our Scroll View by:

scrollView._nativeView.requestDisallowInterceptTouchEvent(true)

And enable them again on stop dragging (panning) subview event by:

scrollView._nativeView.requestDisallowInterceptTouchEvent(false)

If you have another case and just want to disable Scroll View scrolling you can use something like this (for Android):

scrollView._nativeView.setOnTouchListener(new android.view.View.OnTouchListener({
   onTouch: function (view, motionEvent) {
       console.log("DISABLED. onTouch event: Got    motionEvent.getAction() " + motionEvent.getAction() + ".");
       return true;
    }
}))

Answer 2

iOS

scroll_view.ios.scrollEnabled = false; // Disables user scrolling.
scroll_view.ios.scrollEnabled = true; // Enables user scrolling.

Android

scroll_view.android.setScrollEnabled(false); // Disables user scrolling.
scroll_view.android.setScrollEnabled(true); // Enables user scrolling.

Answer 3

Angular 2 Version:

In your html:

<ScrollView #scrollView >
  ...
</ScrollView>

In your controller:

@ViewChild('scrollView') scrollView: ElementRef;

allowScrolling(e) {
    const scrollView: ScrollView = this.scrollView.nativeElement;
    if (platformModule.device.os === 'Android') {
        scrollView.nativeView.requestDisallowInterceptTouchEvent(e);
    }
    if (platformModule.device.os === 'iOS') {
        scrollView.ios.scrollEnabled = !e;
    }
}