Текущая позиция прокрутки при использовании -webkit-overflow-scrolling:touch - Safari iOS javascript event (scrollTop / scrollLeft)
Я использую -webkit-overflow-scrolling:touch, чтобы сделать div с overflow:scroll; плавной прокруткой через события касания 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 исправила это поведение. События прокрутки теперь срабатывают во время прокрутки.
Обратите внимание, что теперь вам придется иметь дело с отрицательными значениями прокрутки во время прокрутки отскока.
2 ответа
Это может помочь. Это решение jQuery, которое я использую для принудительного разбиения на страницы в IOS из стороны в сторону. Это не совсем тот случай, когда ты работаешь. Я использую «overflow-scrolling: auto», который не ведет себя как «сенсорная» версия.
#yourDiv {
-webkit-overflow-scrolling: auto;
overflow:auto;
}
Я использую «overflow-scrolling: auto», потому что он быстрее реагирует на событие касания. К сожалению, «переполнение-прокрутка: касание» действительно сопротивляется анимации 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
};
Получить положение горизонтальной полосы прокрутки при прокрутке (через css overflow-y: scroll)
$('#myNode').bind('scroll', function(e){
var myPos = e.target.scrollLeft;
// do something with myPos but don't naughty
})