it-swarm-pt.tech

Posição de rolagem atual ao usar -webkit-overflow-scrolling: touch - Evento de javascript do Safari para iOS (scrollTop/scrollLeft)

Estou usando o -webkit-overflow-scrolling: toque para fazer um div com overflow: scroll; rolar suavemente pelos eventos de toque do iOS.

Ele funciona brilhantemente, exceto que não parece atualizar element.scrollTop ou element.scrollLeft enquanto estiver rolando. Apenas atualiza element.scrollTop/aciona um evento de rolagem quando o momento se esgota e para.

Alguém sabe de uma maneira de descobrir sua posição de rolagem atual e se há um evento que eu possa ouvir? Gostaria de saber se ele pode ser encontrado através de uma propriedade CSS3, talvez? obrigado

Exemplo abaixo mostrando duas tentativas:

<!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 ============

o iOS 8 classificou esse comportamento. Os eventos de rolagem agora são acionados durante a rolagem.

Observe que agora você terá que lidar com valores de rolagem negativos durante a rolagem de retorno.

26
Jamie G

Na iOS Developer Library, há uma explicação nas diretrizes do Safari sobre isso: 

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

Basicamente, o fluxo de eventos para a rolagem é assim: Toque/comece a arrastar (evento mousewheel) -> pan/movement (sem eventos) -> stop (onscroll)

Portanto, não há nada como um evento contínuo de rolagem sendo acionado enquanto a panela acontece lá apenas um onScroll no final do gesto. 

Se você encontrar uma maneira opcional de realizar isso, me avise :)

10
pixshatterer

Isso pode ajudar. É uma solução jQuery que estou usando para forçar paginação em deslizamentos lado a lado IOS. Não é exatamente o mesmo caso em que você está trabalhando. Estou usando o "overflow-scrolling: auto", que não se comporta como a versão "touch".

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

Eu uso "overflow-scrolling: auto" porque reage mais rapidamente ao evento touchend. Infelizmente, "overflow-scrolling: touch" realmente parece resistir a javascript e animação CSS enquanto está em movimento. Mas pelo menos você pode obter algumas informações de localização durante o pergaminho.

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
};
2
mattsahr

Em uma situação semelhante, estou usando o scrollability.js , que faz um trabalho muito legal simulando o comportamento de rolagem nativa. Então, estou ouvindo o evento 'scrollability-start' e monitorando os atributos top/left do elemento rolado. Eu sei que não é ideal, mas é uma alternativa decente.

2
spacehelmetboy

Aqui está o meu repositório onde eu adicionei o callback onScrolling() para me avisar quando a animação de rolagem do momento está ocorrendo em animate(): https://github.com/simpleshadow/iscroll/blob/master/src/iscroll.js

Eu fiz um aplicativo de exemplo usando sua sugestão aqui: http://jsfiddle.net/simpleshadow/wQQEM/22/

@ robertlawson86 no Github fez essa sugestão para ajudar a fornecer uma idéia de quando agarrar a posição durante a rolagem do momento. Veja o exemplo e a discussão: https://github.com/cubiq/iscroll/issues/183

1
Corey

Eu sei que é estranho, mas você pode acompanhar scrollLeft/scrollTop apenas registrando evento touchstart:

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

Obtém a posição de uma rolagem horizontal durante a rolagem (via css overflow-y: scroll) 

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