Question

我一直在搜索有关-webkit-overflow-scrolling: touch;的文档，但我只能通过这种方式让我的<body>元素部分工作...

<body style="-webkit-overflow-scrolling: touch;">

或者像这样...

<body style="overflow-y: auto; -webkit-overflow-scrolling: touch;">

在iOS中，我的页面将以大约四分之一的速度滚动页面，但随后停止。所以-webkit-overflow-scrolling: touch确实适用于身体的“部分”

如果没有这段代码，它会在整个页面中滚动，但没有动量，也有很多不稳定的动作。

Answer 1

溢出应该是'滚动'

参考：https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

Answer 2

我在iOS 12的iPhone上使用WKWebView。-webkit-overflow-scrolling:touch;没有帮助，但是，我能够使用WKUIDelegate方法来实现平滑滚动，以拦截alert（）调用。我没有执行alert（），而是将scrollView的contentOffset设置为通过alert（）发送的位置值。

// in HtmlTable_VC.m
- (void)viewDidLoad
{
    [super viewDidLoad];

    wKWebView.scrollView.decelerationRate = UIScrollViewDecelerationRateFast;
    // go figure -- faster deceleration seems to slow the scrolling rate
    wKWebView.UIDelegate = self; // WKUIDelegate

    // ...

    NSString *htmlText = @"<body>Your HTML page text here</body>";
    [wKWebView loadHTMLString:htmlText baseURL:[NSBundle mainBundle].bundleURL];
}

// WKUIDelegate
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message
initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler
{
    // if the message is numeric, smooth scroll the wkWebView
    CGPoint scrollPoint = CGPointMake(0, [message intValue]);
    [self->wKWebView.scrollView setContentOffset:scrollPoint animated:YES];
    completionHandler();

    // if not numeric, it was a real alert() interception, can process here
}

和HTML文件（Help.html）：

<head>
    <script>
        function smoothScrollTo( anchor ) {
            var el = document.getElementById(anchor);
            // loop up through the element's parents and combine their offsets
            var elTopPos = 0;
            while ( el != null ) {
                elTopPos += el.offsetTop;
                el = el.offsetParent;
            }
            alert(elTopPos); // send to HtmlTable_VC: runJavaScriptAlertPanelWithMessage
            // which will do the smooth scroll
        }
    </script>
</head>

<body>
Your HTML here
<div id="id1"> Stuff1 </div>
<div id="id2"> Stuff2 </div>
...
 <a onclick="smoothScrollTo('id1')" href="">Go to Stuff1</a>
 <a onclick="smoothScrollTo('id2')" href="">Go to Stuff2</a>
...
</body>

iOS中的垂直滚动不顺畅

2 个答案: