Nativescript: how to programmatically disable / enable ScrollView scrolling?

Question

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

Equiprobable

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;
    }
}))

Equiprobable

requestDisallowInterceptTouchEvent(true) doesn't seem to be working for me, has this been tested on latest version of NativeScript? – Olga

scrollView.ios.scrollEnabled = false Thank you! One-liner works for me. – Tearoom

The block of code where you use setOnTouchListener worked for me. Keep in mind that you have to declare android first, so that'd be declare const android: any;. – Figwort

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.

Cariole

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;
    }
}

Duckling

Answer 4

If anyone is looking for this, you can set isUserInteractionEnabled to false in the ScrollView element and it will disable the user scrolling (you can still do it programmatically).

https://github.com/NativeScript/NativeScript/issues/2892#issuecomment-253536941

Carlo

Answer 5

There is no easy way to disable ScrollView scrolling in NativeScript. In case you want to use ScrollView as a container, you can use ContentView for this purpose . However could you give me more info, why do you want to disable the scrolling.

Theca

Well, I have draggable elements inside ScrollView. When I drag them down ScrollView is scrolling to. I would like to disable the ScrollView once pan 'began' event is fired and activate it back once I register pan 'ended'. – Equiprobable

Answer 6

use this

this.scrollview.isUserInteractionEnabled=false;

or this

this.scrollView.nativeElement).android.getParent().requestDisallowInterceptTouchEvent(false);

for android

Interlope