使用 -webkit-overflow-scrolling:touch 时的当前滚动位置 - Safari iOS javascript 事件 (scrollTop / scrollLeft)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8546863/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Current scroll position when using -webkit-overflow-scrolling:touch - Safari iOS javascript event (scrollTop / scrollLeft)
提问by Jamie G
I'm using -webkit-overflow-scrolling:touch to make a div with overflow:scroll; scroll smoothly through iOS touch events.
我正在使用 -webkit-overflow-scrolling:touch 制作一个带有溢出的 div:scroll; 通过 iOS 触摸事件平滑滚动。
It works brilliantly, except it doesn't seem to update element.scrollTop or element.scrollLeft while it's scrolling. It only updates element.scrollTop / triggers a scroll event when the momentum runs out and it stops.
它工作得很好，除了它在滚动时似乎没有更新 element.scrollTop 或 element.scrollLeft。它只更新 element.scrollTop / 当动量用完并停止时触发滚动事件。
Does anyone know of a way of finding out its current scroll position and if there's an event I can listen for? I wondered if it can be found through a CSS3 property perhaps? Thanks
有谁知道找出其当前滚动位置的方法，以及是否有我可以收听的事件？我想知道是否可以通过 CSS3 属性找到它？谢谢
Example below showing two attempts:
下面的示例显示了两次尝试：
<!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 has sorted this behaviour. Scroll events are now triggered while scrolling.
iOS 8 已经对这种行为进行了排序。现在滚动时会触发滚动事件。
Note that you'll now have to deal with negative scroll values during the bounce scroll.
请注意，您现在必须在反弹滚动期间处理负滚动值。
回答by pixshatterer
In the iOS Developer Library, there is an explanation in the Safari guidelines about it:
在 iOS Developer Library 中，Safari 指南中有关于它的解释：
Basically, the event flow for the scrolling goes like this: touch/start dragging(mousewheel event)-> pan/movement(no events) -> stop(onscroll)
基本上，滚动的事件流是这样的：触摸/开始拖动（鼠标滚轮事件）-> 平移/移动（无事件）-> 停止（滚动）
So there is nothing like a continuous event of scrolling being triggered while the pan happens there just an onScroll at the end of the gesture.
因此，当平移发生时，只有在手势结束时的 onScroll 才会触发滚动的连续事件。
If you find an optional way to accomplish that, let me know :)
如果您找到了一种可选的方法来实现这一点，请告诉我:)
回答by mattsahr
This might help. It's a jQuery solution that I'm using to force pagination on IOS side-to-side swipes. It's not exactly the same case as you're working. I'm using the "overflow-scrolling:auto" which does not behave like the "touch" version.
这可能会有所帮助。这是一个 jQuery 解决方案，我用来在 IOS 左右滑动上强制分页。这与您正在工作的情况不完全相同。我正在使用“溢出滚动：自动”，它的行为与“触摸”版本不同。
#yourDiv {
-webkit-overflow-scrolling: auto;
overflow:auto;
}
I use "overflow-scrolling:auto" because it reacts quicker to the touchend event. Unfortunatley, "overflow-scrolling:touch" does indeed seem to resist javascript and CSS animation while it's in motion. But at least you can get some location information out of it during the scroll.
我使用“溢出滚动：自动”，因为它对 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
};
回答by spacehelmetboy
In a similar situation I am using scrollability.js, which does a really nice job simulating the native scrolling behavior. I'm then listening for the 'scrollability-start' event and monitoring the top/left attributes of the scrolled element. I know it's not ideal, but it's a decent alternative.
在类似的情况下，我使用的是scrollability.js，它在模拟本机滚动行为方面做得非常好。然后我正在监听 'scrollability-start' 事件并监视滚动元素的顶部/左侧属性。我知道这并不理想，但它是一个不错的选择。
回答by Corey Gwin
Here is my repository where I've added the callback onScrolling()to let me know when the momentum scrolling animation is occurring in animate(): https://github.com/simpleshadow/iscroll/blob/master/src/iscroll.js
这是我的存储库，我在其中添加了回调onScrolling()以让我知道何时发生动量滚动动画animate()：https: //github.com/simpleshadow/iscroll/blob/master/src/iscroll.js
I've made an example app using his suggestion here: http://jsfiddle.net/simpleshadow/wQQEM/22/
我在这里使用他的建议制作了一个示例应用程序：http: //jsfiddle.net/simpleshadow/wQQEM/22/
@robertlawson86 on Github made this suggestion to help provide an idea on when to grab the position during momentum scrolling. See example and discussion: https://github.com/cubiq/iscroll/issues/183
Github 上的@robertlawson86 提出了这个建议，以帮助提供有关在动量滚动期间何时抓住位置的想法。查看示例和讨论：https: //github.com/cubiq/iscroll/issues/183
回答by David
I know is weird, but you can keep track of scrollLeft/scrollTop just by registering touchstart event:
我知道这很奇怪，但是您可以通过注册 touchstart 事件来跟踪 scrollLeft/scrollTop：
e.addEventListener("touchstart",function(event){});
回答by flunder
Get the position of a horizontal scroller while srolling ( via css overflow-y:scroll )
滚动时获取水平滚动条的位置（通过 css overflow-y:scroll ）
$('#myNode').bind('scroll', function(e){
var myPos = e.target.scrollLeft;
// do something with myPos but don't naughty
})
回答by Andrew Dinmore
If it helps, scrollTop and scrollLeft are updated in real-time within the touchmove event handler:
如果有帮助，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 );
});
