Sunday, October 2, 2022
HomeiOS Developmentios - Find out how to repair tough scrolling habits of webView...

ios – Find out how to repair tough scrolling habits of webView when resizing it?


Each internet browser has some sort of toolbar on the backside.

Whenever you scroll downwards the toolbar disappears and the web page turns into taller.

This seems clean on Safari and Chrome:

https://www.youtube.com/shorts/vZ2mgcaIcf8

However it seems very tough on each different browser I examined as a result of the webView will get resized and rendered once more.

Courageous Browser:

https://www.youtube.com/shorts/GiZkIYNQVf4

Take a look at it your self, it seems terrible on Microsoft Edge, Opera, DuckDuckGo, Mozilla Firefox and Courageous.

What’s their secret? How does Safari and Chrome behave so clean?

Code to initialize the webView:

    self.webView = [[WKWebView alloc] init];
    
    self.webView.scrollView.delegate = self;

    self.webView.body =
    CGRectMake(0.0,
               0.0,
               self.view.body.measurement.width,
               self.view.body.measurement.top);
    
    [self.view addSubview:self.webView];

    [self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.apple.com/iphone-14-pro/"]]];

Code to resize the webView when scrolling:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    
    // Makes use of a worldwide previousContentOffset variable.

    if (scrollView.contentOffset.y > 0.0) {
        
        CGFloat motion = scrollView.contentOffset.y - self.previousContetOffset.y;
        
        CGFloat allowableMovement = 10.0;
        
        // Going downwards.
        if (motion >= 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 (motion <= -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;
        }
    }
}

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments