Disable Scrolling in Webview

Disable scrolling in webview?

Here is my code for disabling all scrolling in webview:

  // disable scroll on touch
  webview.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
      return (event.getAction() == MotionEvent.ACTION_MOVE);
    }
  });

---

To only hide the scrollbars, but not disable scrolling:

WebView.setVerticalScrollBarEnabled(false);
WebView.setHorizontalScrollBarEnabled(false);

---

or you can try using single column layout but this only works with simple pages and it disables horizontal scrolling:

   //Only disabled the horizontal scrolling:
   webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

---

You can also try to wrap your webview with vertically scrolling scrollview and disable all scrolling on the webview:

<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="vertical"    >
  <WebView
    android:id="@+id/mywebview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:scrollbars="none" />
</ScrollView>

And set

webview.setScrollContainer(false);

Don't forget to add the webview.setOnTouchListener(...) code above to disable all scrolling in the webview. The vertical ScrollView will allow for scrolling of the WebView's content.

Disable horizontal scrolling in flutter webview

In my case it was enough to wrap the WebView in a GestureDetector widget and override onHorizontalDragUpdate() callback.

WebViewController _webViewController;

GestureDetector(
    onHorizontalDragUpdate: (updateDetails) {},
    child: WebView(
      initialUrl: 'about:blank',
      onWebViewCreated: (WebViewController webViewController) {
        _webViewControllerHeader = webViewController;
      },
    ),
)

To disable vertical scrolling in flutter webview you can override onVertivalDragUpdate() correspondingly.

Look for more info here and here.

Disable vertical scroll in WKWebview when scrolling down in top of View

You need to disable bouncing

self.webView.scrollView.bounces = false

How to disable scroll in Webview?

You can disable the scroll by accessnig the native WebView and apoplying a native solution (direct access to the native APIs is one of the greatest advantages of nativeScript as this allows you to work with native solutions)

Example for Android
XML

<WebView loaded="onWebViewLoaded" src="https://www.npmjs.com/package/nativescript-openurl" height="300" ></WebView>

JavaScript

function onWebViewLoaded(args) {
  let wv = args.object;
  console.log(wv);

  if(isAndroid) {
      let webViewAndroid = wv.nativeView;
      console.log(webViewAndroid);

      // Hide the scrollbars, but not disable scrolling:
      webViewAndroid.setVerticalScrollBarEnabled(false);
      webViewAndroid.setHorizontalScrollBarEnabled(false);

      // Disable scrolling
      let myListener = new android.view.View.OnTouchListener({
        onTouch: function (view, event) {
          return (event.getAction() == android.view.MotionEvent.ACTION_MOVE);
        }
      })

      webViewAndroid.setOnTouchListener(myListener);
  }

}
exports.onWebViewLoaded = onWebViewLoaded;

Playground demo can be found here

React Native Android WebView How to disable horizontal scroll?

For Android change scalesPageToFit={false} into scalesPageToFit={true}. It will work.

// ....
const scalesPageToFit = Platform.OS === 'android';

// .... 
return 
    <WebView
      scalesPageToFit={scalesPageToFit}
      bounces={false}
      scrollEnabled={false}
// ....

Update: for recent versions of rn-webview depending on the html content you might need to use also some extra css to target the content that has problems:

max-width: 100%;

overflow-x: hidden;

and/or showsHorizontalScrollIndicator={false}

---

Related Topics