Получение точных позиций прокрутки с помощью -webkit-overflow-scrolling: touch; - PullRequest
Новая
       26

Получение точных позиций прокрутки с помощью -webkit-overflow-scrolling: touch;

4 голосов
/ 04 марта 2012

Я пытаюсь использовать это исправление для поддержки прокрутки с нативным ощущением на веб-странице в iOS 5. Я хотел бы обновить позицию элемента при прокрутке страницы, но позиция возвращается scrollTop похоже немного отличается от фактического положения элемента на странице.

Я создал пример, который пытается сохранить блок текста в том же месте, что и прокрутка страницы. Если вы попробуете это на устройстве iOS, вы увидите, что текст на самом деле дрожит, а не остается в одном и том же месте. Это огорчает, потому что, используя touchmove события напрямую, это можно сделать без дрожания. Но очевидно, что использование встроенного алгоритма прокрутки предпочтительнее.

Кто-нибудь знает обходной путь?

Пример: live 

<!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 голосов
/ 09 марта 2012

Я подал 2 ошибки Safari / WebKit, связанные с этим (rdar: // 10980574) и (rdar: // 10980592).Если будут какие-либо существенные обновления (и я не забуду), я вернусь и обновлю этот ответ.

...