Текущее положение прокрутки при использовании -webkit-overflow-прокрутки: touch - событие javascript для Safari iOS (scrollTop/scrollLeft)

Я использую -webkit-overflow-scrolling: touch, чтобы сделать div с переполнением: прокрутка; прокручивайте плавно через события касания iOS.

Он работает блестяще, за исключением того, что он не обновляет element.scrollTop или element.scrollLeft во время прокрутки. Он только обновляет element.scrollTop/запускает событие прокрутки, когда импульс заканчивается и он останавливается.

Кто-нибудь знает способ узнать свою текущую позицию прокрутки и если есть событие, которое я могу слушать? Я задавался вопросом, можно ли его найти через свойство CSS3? Благодаря

Пример ниже показывает две попытки:

<!DOCTYPE html>
<body>
    <div id="display_a">Scroll is: 0</div>
    <div id="display_b">Scroll is: 0</div>  
    <div id="element" style="width:800px;overflow-x:scroll;-webkit-overflow-scrolling:touch;">
        <div style="font-size:100px;width:1850px;">
            a b c d e f g h i j k l m n o p q r s t u v w x y z
        </div>
    </div>
    <script>
        var e = document.getElementById("element");
        var display_a = document.getElementById("display_a");
        var display_b = document.getElementById("display_b");
        e.addEventListener("scroll",function(event){display_a.innerHTML = "Scroll is: " + event.target.scrollLeft;});
        setInterval(function(){display_b.innerHTML = "Scroll is: " +  e.scrollLeft;},100);
    </script>   
</body>
</html>

============ UPDATE ============

iOS 8 отсортировал это поведение. События прокрутки теперь запускаются при прокрутке.

Обратите внимание, что теперь вам придется иметь дело с отрицательными значениями прокрутки во время прокрутки отскока.

Ответы

Ответ 1

В iOS Developer Library в руководстве Safari есть объяснение:

http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

В принципе, поток событий для прокрутки выглядит следующим образом: touch/start dragging (mousewheel event) → панорамирование/перемещение (без событий) → остановка (onscroll)

Итак, нет ничего похожего на непрерывное событие прокрутки, которое запускается, пока в кассе есть только onScroll в конце жеста.

Если вы найдете дополнительный способ для этого, дайте мне знать:)

Ответ 2

Это может помочь. Это решение jQuery, которое я использую, чтобы накладывать разбивку на страницы на IOS-бок о бок. Это не совсем тот случай, когда вы работаете. Я использую "overflow-scrolling: auto", который не ведет себя как "сенсорная" версия.

#yourDiv {
    -webkit-overflow-scrolling: auto;
    overflow:auto;
}

Я использую "overflow-scrolling: auto", потому что он быстрее реагирует на событие touchhend. Unfortunatley, "переполнение прокрутки: касание" действительно, похоже, противостоит javascript и анимации CSS во время ее движения. Но по крайней мере вы можете получить некоторую информацию о местоположении из нее во время прокрутки.

var pageSwiping = false;

$('#yourDiv').on('scroll', function(e) {
    if (pageSwiping !== true  ) {
        pageSwiping = true;
        var offset = $('#'+e.target.id).scrollLeft();
        $('#yourDiv').one( 'touchend',{elem:e.target.id,dragStart:offset},divMove);
    };
});

var divMove = function(e) {
    pageSwiping = false;
    var elem = e.data.elem;
    var dragEnd = $('#'+elem).scrollLeft();
    var dragDelta = (dragEnd - e.data.dragStart)
        // Make page-alignment decisions based on dragDelta
};

Ответ 3

В аналогичной ситуации я использую scrollability.js, который действительно делает хорошую работу, имитирующую поведение прокрутки. Затем я слушаю событие "запуск прокрутки" и отслеживает атрибуты верхнего/левого элемента прокрутки. Я знаю, что это не идеально, но это достойная альтернатива.

Ответ 4

Вот мой репозиторий, где я добавил обратный вызов onScrolling(), чтобы сообщить мне, когда анимация прокрутки импульса происходит в animate(): https://github.com/simpleshadow/iscroll/blob/master/src/iscroll.js

Я сделал пример приложения, используя его предложение здесь: http://jsfiddle.net/simpleshadow/wQQEM/22/

@robertlawson86 на Github сделал это предложение, чтобы помочь составить представление о том, когда нужно захватить позицию во время прокрутки импульса. См. Пример и обсуждение: https://github.com/cubiq/iscroll/issues/183

Ответ 5

Я знаю, это странно, но вы можете отслеживать scrollLeft/scrollTop, просто зарегистрировав событие touchstart:

e.addEventListener("touchstart",function(event){});

Ответ 6

Получить положение горизонтального скроллера во время прокрутки (через css overflow-y: прокрутка)

$('#myNode').bind('scroll', function(e){
  var myPos = e.target.scrollLeft;
  // do something with myPos but don't naughty
})

Ответ 7

Если это помогает, scrollTop и scrollLeft обновляются в реальном времени в обработчике событий touchmove:

$(function()
{
    var $div = $("#scroll")
    var $p   = $("#display");

    var update = function(e)
    {
        $p.text( e.type +": "+ $div.scrollLeft() +", "+ $div.scrollTop() );
    }

    $div.bind( "touchmove", update )
        .bind( "scroll",    update );
});