Событие прокрутки iOS Safari внутри вложенного элемента - PullRequest
Новая
       1

Событие прокрутки iOS Safari внутри вложенного элемента

5 голосов
/ 20 января 2012

Моя конечная цель состоит в том, чтобы на моей странице был встроенный элемент div, который изначально горизонтально прокручивал (используя -webkit-overflow-scrolling: touch), который также привязывался.

Я могу добиться этого без -webkit-overflow-scrolling, потому чтоУ меня есть доступ к событию ontouchend, поэтому я могу рассчитать моментальную привязку, когда это произойдет, однако для достижения наилучшего возможного UX для этой функции я хочу использовать прокрутку, подобную нативной, для этого элемента.

Проблема с использованием -webkit-overflow-scrolling заключается в том, что при использовании flick / some force, div будет продолжать прокручиваться в течение бита после того, как вы убрали палец (т. Е. AFTER ontouchend выстрелил) ;это означает, что моя привязка вычисляется до того, как прокрутка закончена.

Потратив долгое время, пытаясь найти способ, я не добился успеха.

Во всем контексте страницы safari запускаетonscroll событие, когда прокрутка закончена .Мой вопрос: возможно ли, чтобы это событие сработало в контексте элемента ?т. е. иметь огонь по прокрутке внутри <div id="slideShow">?

Если нет, то возможно ли, например,

(a) Скорость доступа к касанию, чтобы я мог рассчитать, когда выполнить привязку?

или

(b) Эмулировать -webkit-overflow-scroll: touch (эффекты эластичности и скорости).

ПРИМЕЧАНИЕ. В качестве примера можно использовать iPad w/ iOS5.

1 Ответ

2 голосов
/ 22 января 2012

Событие scroll запускается для каждого контейнера прокрутки отдельно, а для iOS - только после того, как прокрутка остановлена ​​и завершена.Вы можете просто прослушать событие прокрутки в вашем контейнере.

Вот пример: 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Test Touch Scrolling</title>
        <style>
            body {
                font-size: 15em;
            }
            #outer {
                height: 1200px;
                width: 300px;
                overflow-x: scroll;
                -webkit-overflow-scrolling: touch;
            }
            #inner {
                width: 600px;
            }
        </style>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                var list = document.getElementById("outer");
                list.addEventListener("scroll", function(event) {
                    alert("Scroll has ended for element with ID '" + event.currentTarget.id + "'");
                });             
            }, false);
        </script>
    </head>
    <body>
        <div id="outer">
            <div id="inner">Some text. And more.</div>
        </div>
    </body>
</html>

Вы увидите предупреждение только тогда, когда вы прокрутили текст горизонтально, а не когдаdiv был прокручен.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...