使用-webkit overflow scrolling:touch-Safari iOS javascript事件时的当前滚动位置（scrollTop/scrollLeft）
我正在使用-webkit overflow scrolling:touch使用overflow:scroll制作div；在iOS触摸事件中平滑滚动 它工作得非常出色，只是在滚动时似乎没有更新element.scrollTop或element.scrollLeft。它仅更新element.scrollTop/在动量耗尽且停止时触发滚动事件 有没有人知道如何找到它当前的滚动位置，以及是否有我可以收听的事件？我想知道是否可以通过CSS3属性找到它？谢谢 下面的示例显示了两种尝试：使用-webkit overflow scrolling:touch-Safari iOS javascript事件时的当前滚动位置（scrollTop/scrollLeft）,javascript,ios,Javascript,Ios,我正在使用-webkit overflow scrolling:touch使用overflow:scroll制作div；在iOS触摸事件中平滑滚动 它工作得非常出色，只是在滚动时似乎没有更新element.scrollTop或element.scrollLeft。它仅更新element.scrollTop/在动量耗尽且停止时触发滚动事件 有没有人知道如何找到它当前的滚动位置，以及是否有我可以收听的事件？我想知道是否可以通过CSS3属性找到它？谢谢 下面的示例显示了两种尝试： <!DOCTY
<!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>
卷轴是：0
卷轴是：0
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
var e=document.getElementById（“元素”）；
var display_a=document.getElementById（“display_a”）；
var display_b=document.getElementById（“display_b”）；
e、 addEventListener（“scroll”，函数（事件）{display_a.innerHTML=“scroll is:”+event.target.scrollLeft；}）；
setInterval（function（）{display_b.innerHTML=“Scroll is:”+e.scrollLeft；}，100）；
请注意，您现在必须在弹跳滚动期间处理负滚动值。在iOS开发者库中，Safari指南中对此进行了解释： 基本上，滚动的事件流如下所示： 触摸/开始拖动（鼠标滚轮事件）->平移/移动（无事件）->停止（onscroll） 因此，当平移发生时，没有什么像连续的滚动事件一样被触发，只是在手势的末尾有一个onScroll
如果你能找到一个可选的方法来实现这一点，请告诉我：）这可能会有所帮助。这是一个jQuery解决方案，我使用它在IOS端到端滑动中强制分页。这和你工作的情况不完全一样。我使用的是“溢出滚动：自动”，其行为与“触摸”版本不同 我使用“溢出滚动：自动”，因为它对touchend事件的反应更快。不幸的是，“overflow scrolling:touch”似乎确实在运动中抵制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
};
如果有帮助，则在touchmove事件处理程序中实时更新scrollTop和scrollLeft：
$(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 );
});
在我正在使用的类似情况下，它在模拟本机滚动行为方面做得非常好。然后我监听“scrollability start”事件并监视滚动元素的上/左属性。我知道这并不理想，但这是一个不错的选择。我知道这很奇怪，但您只需注册touchstart事件即可跟踪scrollLeft/scrollTop：
e.addEventListener("touchstart",function(event){});
在滚动时获取水平滚动条的位置（通过css overflow-y:scroll）
这是我的存储库，我在其中添加了回调
onScrolling（）animate（）@Github上的robertlawson86提出了这个建议，以帮助提供在动量滚动期间何时抓住位置的想法。参见示例和讨论：嗨，马特，刚刚拿起这个答案。这是一个可能的解决方案，但我喜欢本机iOS滚动的感觉，所以我真的希望保持这种感觉（不尝试复制拖动动量代码，iOS做得很好）。谢谢你！恐怕我还没有接近这个问题，但如果我找到了解决方案，我一定会让大家知道。谢谢大家。需要注意的是，如果你想让元素在屏幕上保持静态，那么位置：iOS 5引入了固定CSS。这假设jQuery依赖jQuery用于一个简短的工作演示；scrollTop、scrollLeft和touchmove在没有它的情况下都是标准的。我不得不说，它在模拟iOS风格的滚动时确实做得很好！我一定会仔细考虑一下。谢谢你的建议，让我们看一看，它也有同样的作用，但我发现更有用的方法是scrollTo（）和scrollToElement（）。谢谢David，但在你用手指触摸屏之后，这肯定没有帮助，只是动力让它滚动。还是我遗漏了什么？我只是想向所有迄今为止做出贡献的人表示衷心的感谢，我担心我们不会找到完美的解决方案，但下面有一些好的建议。iOS>8上的第三方浏览器上仍然存在此问题。xScroll事件不会在主屏幕Web应用程序或UIWebViews中触发此假设存在jQuery依赖性
e.addEventListener("touchstart",function(event){});
$('#myNode').bind('scroll', function(e){
var myPos = e.target.scrollLeft;
// do something with myPos but don't naughty
})