CSS iOS 中的垂直滚动不流畅
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37313872/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertical scrolling in iOS not smooth
提问by Matt
I've been searching far and wide through documentation regarding -webkit-overflow-scrolling: touch;, but I can only get it to work partially for my <body>element this way...
我一直在广泛搜索关于 的文档-webkit-overflow-scrolling: touch;，但我只能通过<body>这种方式让它部分地为我的元素工作......
<body style="-webkit-overflow-scrolling: touch;">
or like this...
或者像这样...
<body style="overflow-y: auto; -webkit-overflow-scrolling: touch;">
In iOS, my page will scroll with momentum about a fourth of the way down in the page, but then stop. So -webkit-overflow-scrolling: touchdoes work for a "part" of the body
在 iOS 中，我的页面会以动量滚动到页面下方四分之一处，然后停止。所以-webkit-overflow-scrolling: touch不工作了身体的“零件”
Without this code, it will scroll all of the way through the page, but with no momentum and with a lot of jerky motion.
如果没有此代码，它会一直滚动页面，但没有动力并且有很多生涩的动作。
回答by moritzm3
What about applying the -webkit-overflow-scrolling: touch;to all elements of your site:
将 应用于-webkit-overflow-scrolling: touch;您网站的所有元素怎么样：
* {
-webkit-overflow-scrolling: touch;
}
And you should create an extra CSS file instead of using the css attribute.
您应该创建一个额外的 CSS 文件，而不是使用 css 属性。
回答by Pandiarajan
overflow should be 'scroll'
溢出应该是“滚动”
ref: https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/
参考：https: //css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/
回答by Jeff
I'm using WKWebView on an iPhone, iOS 12. I got no help with -webkit-overflow-scrolling:touch;But, I was able to implement a smooth scroll using a WKUIDelegate method for intercepting alert() calls. Instead of performing the alert(), I set the scrollView's contentOffset to a position value that's sent via the alert().
我在 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
}
And the HTML file (Help.html):
和 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>
