Question

我正在使用-webkit-overflow-scrolling：touch来创建一个带溢出的div：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>

============更新============

iOS 8已对此行为进行了排序。现在滚动时会触发滚动事件。

请注意，您现在必须在退回滚动期间处理负滚动值。

Answer 1

在iOS开发人员库中，Safari指南中有一个关于它的解释：

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

基本上，滚动的事件流程如下：触摸/开始拖动（鼠标滚轮事件） - ＆gt;平移/移动（无事件） - ＆gt;停止（onscroll）

所以没有什么比连续事件的滚动被触发而平移发生在手势结束时只有onScroll。

如果您找到了实现这一目标的可选方法，请告诉我：）

Answer 2

这可能会有所帮助。这是一个jQuery解决方案，我用来强制IOS左右滑动分页。这与你工作的情况不完全相同。我正在使用“overflow-scrolling：auto”，它不像“触摸”版本。

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

我使用“overflow-scrolling：auto”，因为它对touchend事件的反应更快。不幸的是，“溢出滚动：触摸”确实似乎抵制了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
};

Answer 3

在类似的情况下，我正在使用scrollability.js，它在模拟本机滚动行为方面做得非常好。然后我正在监听'scrollability-start'事件并监视滚动元素的top / left属性。我知道这不是理想的，但它是一个不错的选择。

Answer 4

这是我的存储库，我在其中添加了回调onScrolling()，让我知道动态滚动动画何时在animate()中发生：https://github.com/simpleshadow/iscroll/blob/master/src/iscroll.js

我在这里使用他的建议做了一个示例应用程序：http://jsfiddle.net/simpleshadow/wQQEM/22/

Github上的@ robertlawson86提出了这个建议，以帮助提供何时在动量滚动期间抓住位置的想法。请参阅示例和讨论：https://github.com/cubiq/iscroll/issues/183

Answer 5

我知道这很奇怪，但你可以通过注册touchstart事件来跟踪scrollLeft / scrollTop：

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

Answer 6

滚动时获取水平滚动条的位置（通过css overflow-y：scroll）

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

Answer 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 );
});

使用-webkit-overflow-scrolling时的当前滚动位置：touch - Safari iOS javascript事件（scrollTop / scrollLeft）

7 个答案: