javascript - android webview中的水平分页就像ios一样

Question

func setupScrollDirection() {
        switch readerConfig.scrollDirection {
        case .vertical, .defaultVertical, .horizontalWithVerticalContent:
            scrollView.isPagingEnabled = false
            paginationMode = .unpaginated
            scrollView.bounces = true
            break
        case .horizontal:
            scrollView.isPagingEnabled = true
            paginationMode = .leftToRight
            paginationBreakingMode = .page
            scrollView.bounces = false
            break
        }
    }

上面的代码是否有替代方案，我正在尝试水平使用 webview。我已经尝试过像这样的 javaScript

 String varMySheet = "var mySheet = document.styleSheets[0];";

                String addCSSRule = "function addCSSRule(selector, newRule) {"
                        + "ruleIndex = mySheet.cssRules.length;"
                        + "mySheet.insertRule(selector + '{' + newRule + ';}', ruleIndex);"

                        + "}";

             /*   String insertRule1 = "addCSSRule('html', 'padding: 0px; height: "
                        + (webView.getMeasuredHeight() / getResources().getDisplayMetrics().density)
                        + "px; -webkit-column-gap: 0px; -webkit-column-width: "
                        + webView.getMeasuredWidth() + "px;')";*/
                float height=webView.getMeasuredHeight() / getResources().getDisplayMetrics().density;
                    String insertRule1 = "addCSSRule('html', 'margin:0px; padding:0px; height: "
                        + (height)
                        + "px; -webkit-column-gap: 0px; -webkit-column-width: "
                        + webView.getMeasuredWidth() + "px;')";


                webView.loadUrl("javascript:" + varMySheet);
                webView.loadUrl("javascript:" + addCSSRule);
                webView.loadUrl("javascript:" + insertRule1);

但是 webview 下面有一个空白区域，并且滚动也没有分页。

Answer 1

可以使用 javascript 将 style="overflow-x: auto; Overflow-y: -webkit-paged-x;" 添加到您的正文中:

        String js = "javascript:function initialize() { " +
                "var d = document.getElementsByTagName('body')[0];" +
                "d.style.overflow = '-webkit-paged-x';" +
                "}";
        webView.loadUrl(js);
        webView.loadUrl("javascript:initialize()");

以及在您的 WebView 中重写onOverScrolled，如下所示:

@Override
protected void onOverScrolled(int scrollX, int scrollY, boolean clampedX, boolean clampedY) {
    scrollY = 0; // disables vertical scroll
    super.onOverScrolled(scrollX, scrollY, clampedX, clampedY);
}

将导致水平滚动而不分页。还没有分页的解决方案。