调整 webView 大小时如何修复其粗略滚动行为?

How to fix rough scrolling behavior of webView when resizing it?

提问人:Vulkan 提问时间:9/21/2022 最后编辑:Vulkan 更新时间:1/1/2023 访问量:500

问:

每个 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,页面再次开始滚动。

iOS Swift Objective-C UIscrollView wkWebView

评论

1赞 halfer 10/2/2022
(这看起来是个好问题。顺便说一句:赏金是短暂的,通常不应该在问题中提及。值得注意的是,赏金不是为好的答案买单,而是为了支付额外的曝光率。虽然人们可能更倾向于在提供赏金的情况下给出一个长答案,但无论是否有好的答案,赏金都会被花掉。问题最好不要列出一长串赏金支付标准)。

答:

2赞 user16930239 9/28/2022 #1

Safari 不会调整 WebView 的大小,而是在 WebView 上方显示工具提示。(如果在不同的网站上尝试,您可以确认这一点)

Brave 浏览器在滚动时从拖曳侧面(顶部和底部)调整 WebView 的大小,这将使它出现故障和粗糙。

解决 方案:

选项 1:

不要调整大小,在 WebView 上方显示工具提示。

选项 2:在开始时显示 WebView 上方的工具提示,然后在滚动停止时调整大小,动画流畅(调整大小后确保保持相同的滚动位置)

选项 2:在滚动停止之前不显示工具提示

评论

0赞 Vulkan 9/28/2022
感谢您的回复,但不幸的是,它比这复杂得多。有些网站喜欢 maps.google.com 你不能简单地把工具栏放在上面,因为它隐藏了UI元素,但你的回答确实激励我走向不同的路线。我真的很想听听你对谷歌浏览器如何做到这一点的看法。我在帖子中添加了一个新视频来证明这一点。现在,我再看一遍,似乎 Chrome 也没有调整 webView 的大小。查看右上角的垂直滚动条。你能解释一下这种奇怪的行为吗?
1赞 user16930239 9/28/2022
是的,我可以解释一下,我认为 Chrome 在呈现页面时会为网页添加上边距。您可以通过向 WebView 注入代码来模拟它,但如果网站不是您的,我不建议这样做。