How to disable Vertical scrolling of webview to load whole page as different column

Question

I want to disable webview vertical scroll view.Load the web page as columns in webview by using this way I can give the user a book reading effect.

this is the style I added in html.it is not working at all.

  loadingStringHorizontal="<style type='text/css'>body { width:200px;height:400px;
    -webkit-column-gap:17px;-webkit-column-width:170px;
     text-align:justify ;} </style>";

Thanks for your time.

Your Question title says : disable horizontal scrolling of webview. and your question description says you want to disable vertical scroll view of webview ! — Kartik Domadiya, Apr 12 '11 at 09:57
Try this: http://stackoverflow.com/questions/2527899/disable-scrolling-in-webview — Rajath, Apr 12 '11 at 10:03

score 4 · Answer 1 · answered Sep 24 '14 at 02:54

4

You can try single column layout

myWebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

or in XML you can put none in scrollbar

<WebView
    android:scrollbars="none" />

then set myWebView.setScrollContainer(false);

answered Sep 24 '14 at 02:54

Bon Kho

124
10

SINGLE_COLUMN is deprecated – Roel Jun 14 '17 at 14:48

Milad Ahmadi · Answer 2 · 2017-05-30T06:01:30.557

first you have to add custom webview for disable vertical scroll down

class CustomWebView2 extends WebView
{
    Context mContext = null;
    private float start_y = -1;
    private String DEBUG_TAG = "  touch:";

    public CustomWebView2(Context context)
    {
        super(context);
        mContext = this.getContext();
    }

    public CustomWebView2(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        mContext = context;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event)
    {
        int action = event.getAction();

        switch (action)
        {
            case (MotionEvent.ACTION_DOWN):
                /**
                 * get Y position
                 */
                start_y = event.getY();
                break;
            case (MotionEvent.ACTION_MOVE):
                /**
                 * if you scroll to up more than 60px
                 * webView scroll back to Y=0
                 */
                if(start_y-event.getY()>60)
                {
                    scrollTo(getScrollX(),0);
                    return true;
                }
                break;
            case (MotionEvent.ACTION_UP):
                Log.d(DEBUG_TAG, "Action was UP");
                break;
        }
        return super.onTouchEvent(event);
    }
}

then you can create multi columns webview with javascript (https://stackoverflow.com/a/9165698/1140304)

You have to apply these lines to the setting of webview

 CustomWebView webView_ = (CustomWebView) view.findViewById(R.id.webView);
 webView_.getSettings().setUseWideViewPort(true);
 webView_.getSettings().setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);
 /**
 * hide vertical scrollBar
 */
 webView_.setVerticalScrollBarEnabled(false);

after your page completely loaded on webview , you have to run javascript code on your webview

 webView_.setWebViewClient(new WebViewClient(){

            public void onPageFinished(WebView view, String url) {
                injectJavascript();
            }

        });

this is javascript code

public void injectJavascript() {
        String js = "javascript:function initialize() { " +
                "var d = document.getElementsByTagName('body')[0];" +
                "var ourH = window.innerHeight; " +
                "var ourW = window.innerWidth; " + 
                "var fullH = d.offsetHeight; " +
                "var pageCount = Math.floor(fullH/ourH)+1;" +
                "var currentPage = 0; " +
                "var newW = pageCount*ourW; " +
                "d.style.height = ourH+'px';" +
                "d.style.width = newW+'px';" +
                "d.style.webkitColumnGap = '2px'; " +
                "d.style.margin = 0; " +
                "d.style.webkitColumnCount = pageCount;" +
                "}";
        webView_.loadUrl(js);
        webView_.loadUrl("javascript:initialize()");
    }

Add some description too rather than dumping the code only. – Satan Pandeya May 29 '17 at 10:19 — Satan Pandeya, May 29 '17 at 10:19

score 1 · Answer 3 · answered Jun 09 '18 at 10:29

1

Here a simple but effective solution, the only working for me (reference here):

body{
    position:fixed;
    top:0;
}

answered Jun 09 '18 at 10:29

RikiRiocma

746
12
28

score 0 · Answer 4 · edited Aug 07 '12 at 11:26

0

Try adding CSS overflow: auto;overflow-y: hidden;

edited Aug 07 '12 at 11:26

Pablo Claus

5,886
3
29
38

answered Aug 07 '12 at 09:48

StuartM

6,743
18
84
160

score 0 · Answer 5 · answered May 29 '22 at 06:43

Custom WebView with on/off toggle for scrolling

class LockableWebView : WebView {
    private var scrollable = true
    constructor(context: Context) : super(context)
    constructor(context: Context, @Nullable attrs: AttributeSet?) : super(context, attrs)
    constructor(
        context: Context,
        @Nullable attrs: AttributeSet?,
        defStyleAttr: Int
    ) : super(context, attrs, defStyleAttr)
    @SuppressLint("ClickableViewAccessibility")
    override fun onTouchEvent(ev: MotionEvent): Boolean = scrollable && super.onTouchEvent(ev)
    override fun onInterceptTouchEvent(ev: MotionEvent): Boolean = scrollable && super.onInterceptTouchEvent(ev)
    fun setScrollingEnabled(enabled: Boolean) { scrollable = enabled }
    fun onScrollStateChanged(startDelay: Long = 100, stopDelay: Long = 400, listener: (Boolean) -> Unit) {
        setOnTouchListener { v, event ->
            when (event.action) {
                MotionEvent.ACTION_SCROLL, MotionEvent.ACTION_MOVE -> handler.postDelayed({ listener.invoke(true) }, startDelay)
                MotionEvent.ACTION_CANCEL, MotionEvent.ACTION_UP -> handler.postDelayed({ listener.invoke(false) }, stopDelay)
            }
            v.performClick()
            false
        }
    }
}



webView.setScrollingEnabled(true/false)

How to disable Vertical scrolling of webview to load whole page as different column

5 Answers5