Vertical scrolling in iOS not smooth

Question

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.

Link, or it didn't happen. – Andy Hoffman May 19 '16 at 04:59 — Andy Hoffman, May 19 '16 at 04:59

score 116 · Answer 1 · answered Aug 16 '16 at 14:16

116

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.

answered Aug 16 '16 at 14:16

moritzm3

1,197
1
7
6

8

This property has a non-standard warning in MDN docs. Does anyone know what kind of problems this might cause? https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling – Nick May 29 '18 at 09:19
2

@Nick background-attachment: fixed not works with this property – aletede91 May 20 '19 at 12:28
2

Causes issues with position fixed children not able to render outside of parent when this property is combined with overflow: scroll. – Blake Plumb Aug 09 '19 at 22:47
1

invalid property value when using `-webkit-overflow-scrolling: touch;` **is there any modern solution for this** – Sudarshana Dayananda Sep 05 '19 at 12:33

score 4 · Answer 2 · answered Mar 14 '18 at 13:44

4

overflow should be 'scroll'

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

answered Mar 14 '18 at 13:44

Pandiarajan

126
8

4

A link to a solution is welcome, but please ensure your answer is useful without it: [add context around the link](//meta.stackexchange.com/a/8259) so your fellow users will have some idea what it is and why it’s there, then quote the most relevant part of the page you're linking to in case the target page is unavailable. [Answers that are little more than a link may be deleted.](//stackoverflow.com/help/deleted-answers) – Filnor Mar 14 '18 at 14:06

score 1 · Answer 3 · answered Apr 23 '19 at 22:18

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>

Vertical scrolling in iOS not smooth

3 Answers3

Linked