CODEWITHSUNDEEP
css
Matt
Matt

Reputation: 821

Vertical scrolling in iOS not smooth

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...

<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: touch does work for a "part" of the body

Without this code, it will scroll all of the way through the page, but with no momentum and with a lot of jerky motion.

Upvotes: 35

Views: 49078

Answers (3)

Jeff
Jeff

Reputation: 2699

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().

// 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):

<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>

Upvotes: 1

Pandiarajan
Pandiarajan

Reputation: 126

overflow should be 'scroll'

ref: https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

Upvotes: 4

moritzm3
moritzm3

Reputation: 1197

What about applying the -webkit-overflow-scrolling: touch; to all elements of your site:

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

And you should create an extra CSS file instead of using the css attribute.

Upvotes: 116

Related Questions