iOS中的垂直滚动不流畅答案

【问题标题】：Vertical scrolling in iOS not smoothiOS中的垂直滚动不流畅
【发布时间】：2016-05-19 04:16:45
【问题描述】：

我一直在广泛搜索有关 -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 确实适用于身体的“一部分”

如果没有此代码，它将一直滚动到整个页面，但没有动力并且有很多生涩的动作。

【问题讨论】：

链接，否则没有发生。

标签： css

【解决方案1】：

如何将-webkit-overflow-scrolling: touch; 应用于您网站的所有元素：

* {
    -webkit-overflow-scrolling: touch;
}

你应该创建一个额外的 CSS 文件而不是使用 css 属性。

【讨论】：

你拯救了我的一天
这个属性在 MDN 文档中有一个非标准的警告。有谁知道这可能会导致什么样的问题？ developer.mozilla.org/en-US/docs/Web/CSS/…
@Nick background-attachment：已修复不适用于此属性
当此属性与溢出结合使用时，导致位置固定的子级无法在父级之外呈现的问题：滚动。
使用-webkit-overflow-scrolling: touch;时的属性值无效有什么现代解决方案

【解决方案2】：

溢出应该是'滚动'

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

【讨论】：

欢迎提供解决方案链接，但请确保您的答案在没有它的情况下有用：add context around the link 这样您的其他用户就会知道它是什么以及为什么会出现，然后引用最相关的您链接到的页面的一部分，以防目标页面不可用。 Answers that are little more than a link may be deleted.

【解决方案3】：

我在 iPhone、iOS 12 上使用 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>

【讨论】：