使用-webkit-overflow-scrolling: touch获取精确的滚动位置

4

我正在尝试使用这个修复方法在iOS 5上支持网页的原生滚动。我想要在页面滚动时更新元素的位置,但是scrollTop返回的位置似乎与页面上元素的实际位置略有不同。

我创建了一个示例,试图保持一段文本与页面滚动时处于相同位置。如果您在iOS设备上尝试,您会发现文本实际上会抖动而不是保持在完全相同的位置。这很令人不快,因为使用touchmove事件直接可以完全无抖动地完成此操作。但显然,使用内置滚动算法更可取。

是否有人知道解决方法?

示例:演示

<!DOCTYPE html>
<html>
    <head>
        <title>Scrolling test</title>
        <meta charset="utf8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
        <style type="text/css" media="screen">
            * {
                margin: 0px;
                padding: 0px;
                -webkit-backface-visibility: hidden;
            }
            #outer, #wrapper {
                position: absolute;
                height: 100%;
                width: 100%;
                overflow: auto;
                -webkit-overflow-scrolling: touch;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" charset="utf-8">
            $.event.props.push("touches");
            $(function() {
                $("#wrapper").on("touchmove", function(e) {
                    $("#thing").css("-webkit-transform", "translateY(" + ($(this).scrollTop()) + "px)");
                });
            });
        </script>
    </head>
    <body>
        <div id="outer">
            <div id="wrapper">
                <div id="thing">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
            </div>
        </div>
    </body>
</html>
1个回答

2

我已经提交了两个与此相关的Safari/WebKit错误报告(rdar://10980574)和(rdara://10980592)。如果有任何重大更新(并且我记得),我将回来更新这个答案。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接