提问人:Vulkan 提问时间:9/21/2022 最后编辑:Vulkan 更新时间:1/1/2023 访问量:500
调整 webView 大小时如何修复其粗略滚动行为?
How to fix rough scrolling behavior of webView when resizing it?
问:
每个 Web 浏览器的底部都有某种工具栏。
当您向下滚动时,工具栏会消失,页面会变高。这在 Safari 和 Chrome 上看起来很流畅。
Safari:https://youtu.be/HKFx_zo3818
铬:https://youtu.be/pGNV6hBGkjo
但是在我测试过的所有其他浏览器上,它看起来都非常粗糙。因为 webView 会再次调整大小并呈现。
勇敢:https://youtu.be/BYqucsPArIA
它在Microsoft Edge,Opera,DuckDuckGo,Mozilla Firefox和Brave上看起来很糟糕。
他们的秘诀是什么?Safari 和 Chrome 如何表现得如此流畅?
初始化 webView 的代码:
self.webView = [[WKWebView alloc] init];
self.webView.scrollView.delegate = self;
self.webView.frame =
CGRectMake(0.0,
0.0,
self.view.frame.size.width,
self.view.frame.size.height);
[self.view addSubview:self.webView];
[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.apple.com/iphone-14-pro/"]]];
滚动时调整 webView 大小的代码:
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
// Uses a global previousContentOffset variable.
if (scrollView.contentOffset.y > 0.0) {
CGFloat movement = scrollView.contentOffset.y - self.previousContetOffset.y;
CGFloat allowableMovement = 10.0;
// Going downwards.
if (movement >= allowableMovement) {
[UIView animateWithDuration:0.2
animations:^{
self.webView.frame =
CGRectMake(0.0,
0.0,
self.view.frame.size.width,
self.view.frame.size.height);
}];
self.previousContetOffset = scrollView.contentOffset;
}
// Going upwards.
if (movement <= -allowableMovement) {
[UIView animateWithDuration:0.2
animations:^{
self.webView.frame =
CGRectMake(0.0,
0.0,
self.view.frame.size.width,
self.view.frame.size.height - 80.0); // Height of toolbar
}];
self.previousContetOffset = scrollView.contentOffset;
}
}
}
编辑 1
我愿意使用 Swift。
编辑 2
关于如何做到这一点,我有一个强有力的理论:
向下滚动时,触摸不会传递到 scrollView,因此页面实际上不会滚动。相反,它们用于确定工具栏的可见程度(通过将其位置调整为垂直轴)。当工具栏完全出现时(可能相当于 50px 的滚动),触摸会传递到下面的 scrollView,页面再次开始滚动。
答:
Safari 不会调整 WebView 的大小,而是在 WebView 上方显示工具提示。(如果在不同的网站上尝试,您可以确认这一点)
Brave 浏览器在滚动时从拖曳侧面(顶部和底部)调整 WebView 的大小,这将使它出现故障和粗糙。
解决 方案:
选项 1:
不要调整大小,在 WebView 上方显示工具提示。
选项 2:在开始时显示 WebView 上方的工具提示,然后在滚动停止时调整大小,动画流畅(调整大小后确保保持相同的滚动位置)
选项 2:在滚动停止之前不显示工具提示
评论