使用-webkit溢出滚动时的当前滚动位置：touch – Safari iOS JavaScript事件（scrollTop / scrollLeft）
我正在使用-webkit溢出滚动：触摸来使溢出：滚动div; 通过iOS touch事件平滑滚动。
它出色地工作，除了在滚动时不会更新element.scrollTop或element.scrollLeft。 它只会更新element.scrollTop /触发一个滚动事件，当动量用完，它停止。
有没有人知道find当前滚动位置的方法，如果有事件我可以听？ 我想知道是否可以通过CSS3属性find它？ 谢谢
以下示例显示了两次尝试：
<!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;"> abcdefghijklmnopqrstu vwxyz </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已经对此行为进行了sorting。 滚动事件现在在滚动时触发。
请注意，您现在必须在反弹滚动中处理负向滚动值。
在iOS开发者库中，Safari指南中有一个解释：
基本上，滚动的事件stream程如下：触摸/开始拖动（鼠标滚轮事件） – >平移/移动（无事件） – >停止（onscroll）
所以没有什么事情像是一个连续的滚动事件被触发，而平底锅恰好在手势结尾处有一个onScroll。
如果你find一个可选的方法来完成，让我知道:)
这可能有帮助。 这是一个jQuery解决scheme，我正在使用强制分页IOS侧向滑动。 和你工作的情况不一样。 我正在使用不像“触摸”版本的“溢出滚动：自动”。
#yourDiv { -webkit-overflow-scrolling: auto; overflow:auto; }
我使用“溢出滚动：自动”，因为它对触发事件反应更快。 Unfortunatley，“溢出滚动：触摸”确实似乎抵制JavaScript和CSSanimation，而它的运动。 但至less在滚动过程中你可以得到一些位置信息。
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 };
在类似的情况下，我正在使用scrollability.js ，它可以很好地模拟本地滚动行为。 然后，我正在监听“scrollability-start”事件并监视滚动元素的顶部/左侧属性。 我知道这并不理想，但这是一个不错的select。
这里是我的仓库，我已经添加了callbackonScrolling()让我知道animation滚动animation发生在animate() ： https ： //github.com/simpleshadow/iscroll/blob/master/src/iscroll。 JS
我在这里使用他的build议做了一个示例应用程序： http : //jsfiddle.net/simpleshadow/wQQEM/22/
Github上的@ robertlawson86提出了这个build议，以帮助提供一个关于何时在势头滚动期间获取位置的想法。 看例子和讨论： https ： //github.com/cubiq/iscroll/issues/183
我知道是奇怪的，但你可以通过注册touchstart事件跟踪scrollLeft / scrollTop：
e.addEventListener("touchstart",function(event){});
在滚动的同时获取水平滚动条的位置（通过css overflow-y：scroll）
$('#myNode').bind('scroll', function(e){ var myPos = e.target.scrollLeft; // do something with myPos but don't naughty })
如果有帮助，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 ); });