CODEWITHSUNDEEP
androidhtmlcsswebviewscroll
Perry
Perry

Reputation: 244

How to stop INTERNAL scrolling of WebView in Android?

I have a WebView in my application which has HTML content rendered in it and size of HTML content is larger than size of WebView. Due to which content is scrolling inside it when user drags his/her finger on it. I want to stop this INTERNAL scrolling being happening with content.

Heres what I have already tried so far:

WebView view = new WebView(context);  //context is of Activity
view.setHorizontalScrollBarEnabled(false);
view.setVerticalScrollBarEnabled(false);
view.setScrollContainer(false);

and in CSS as:

overflow : hidden !important;

Kindly suggest solutions except Disabling Finger Drag (Hack) for webview because that disturb my other functionality, which is as follows:

@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
    if(motionEvent.getAction() == MotionEvent.ACTION_MOVE)
    {
        return true;
    }
  }

Upvotes: 9

Views: 3702

Answers (1)

Josh Burgess
Josh Burgess

Reputation: 9567

Add a container to your webview that wraps all your content and sits just below the body element, like so:

<body id="myBody">
  <div class="container">
    <!-- All your content goes in this new div.container -->
  </div>
</body>

Then, add this CSS to your page:

body {
  height: 100%;
  width: 100%;
  pointer-events: none;
}
div.container {
  overflow: hidden!important;
  height: 100%;
  width: 100%;
}

The problem is that a WebView seems to ignore scrolling on the body despite overflow rules, and since a body expands to meet its contents, it'll always think there is more to scroll to. What this is doing is resetting the body to the size of the WebView, and then using the container to keep the body from expanding beyond the WebView with more content.

Hope that helps.

Upvotes: 4

Related Questions