first you need to add a custom webview to disable vertical scrolling 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): start_y = event.getY(); break; case (MotionEvent.ACTION_MOVE): 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 multiple webview columns using javascript ( fooobar.com/questions/96881 / ... )
You must apply these lines to your webview setup.
CustomWebView webView_ = (CustomWebView) view.findViewById(R.id.webView); webView_.getSettings().setUseWideViewPort(true); webView_.getSettings().setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS); webView_.setVerticalScrollBarEnabled(false);
after fully loading the page in a web browser, you should run javascript code in your web browser
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()"); }
source share