嵌套元素中的iOS Safari onscroll事件 [英] iOS Safari onscroll event within nested element
问题描述
我的最终目标是在我的页面上有一个内联div，它本身水平滚动（使用 -webkit-overflow-scrolling：touch ），它也会捕捉。
我可以实现没有 -webkit-overflow-scrolling 因为我可以访问 ontouchend 事件，所以我可以计算我的快照，但是，为了实现此功能的最佳UX，我想在此元素上使用类似本机的滚动。 / p>
使用-webkit-overflow-scrolling的问题是使用轻弹/一些力，div在你拍完之后会继续滚动一点你的手指关闭（即AFTER ontouchend 已被解雇）;这意味着我的快照在滚动完成之前计算。
我花了很长时间试图找到方法，但我还没有成功。
在整个页面上下文中，当滚动完成时，safari会触发 onscroll 事件。我的问题是，是否可以在元素 的上下文中触发 ？即在< div id =slideShow> ？
内滚动火焰如果没有，是否可能要么
（a）ontouchmove的访问速度，例如，我可以计算何时运行快照？
或
（b）模拟-webkit-overflow-scroll：touch（弹性和速度效果）。
注意：为了举例，使用带有iOS5的iPad。
滚动事件分别在每个滚动容器上触发，并且仅在滚动停止并且完成后才在iOS上触发。你可以直接听容器上的滚动事件。
这是一个例子：
<！DOCTYPE html>
< html lang =en>
< head>
< meta charset =utf-8/>
< title> Test Touch Scrolling< / title>
< style>
body {
font-size：15em;
}
#outer {
身高：1200px;
宽度：300px;
overflow-x：scroll;
-webkit-overflow-scrolling：touch;
}
#inner {
宽度：600px;
}
< / style>
< script>
document.addEventListener（DOMContentLoaded，function（）{
var list = document.getElementById（outer）;
list.addEventListener（scroll，function（event）{
alert（Scroll已结束元素ID'+ event.currentTarget.id +'）;
}）;
}，false）;
< / script>
< / head>
< body>
< div id =outer>
< div id =inner>一些文字。还有更多。< / div>
< / div>
< / body>
< / html>
只有在水平滚动文本时才会看到警报，而不是在out div已经过时滚动。
My ultimate aim is to have an inline div on my page which horizontally scrolls natively (using -webkit-overflow-scrolling: touch) that also snaps.
I can achieve this without -webkit-overflow-scrolling because I have access to the ontouchend event, so I can calculate my snap when that happens, however, to achieve the best possible UX for this feature, I want to use native-like scrolling on this element.
The problem with using -webkit-overflow-scrolling is that using a flick/some force, the div will continue to scroll for a bit after you've taken your finger off (i.e. AFTER ontouchend has fired); which means my snap calculates before the scrolling is finished.
Having spent a long time trying to find ways round, I have had no success yet.
In the entire page context, safari fires the onscroll event when a scroll is finished. My question is, is it possible to have this event fire within the context of an element? i.e. have onscroll fire inside <div id="slideShow">?
If not, is it possible to either
(a) Access velocity of a ontouchmove for example, so I could calculate when to run the snap?
or
(b) Emulate -webkit-overflow-scroll: touch (the elasticity and velocity effects).
NOTE: For the sake of example, using iPad w/ iOS5.
The scroll event gets fired on every scrolling container separately, and on iOS only after scrolling has stopped and is complete. You can simply listen for the scroll event on your container.
Here is an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Touch Scrolling</title>
<style>
body {
font-size: 15em;
}
#outer {
height: 1200px;
width: 300px;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
#inner {
width: 600px;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var list = document.getElementById("outer");
list.addEventListener("scroll", function(event) {
alert("Scroll has ended for element with ID '" + event.currentTarget.id + "'");
});
}, false);
</script>
</head>
<body>
<div id="outer">
<div id="inner">Some text. And more.</div>
</div>
</body>
</html>
You will see the alert only when you have scrolled the text horizontally, not when the out div has been scrolled.
这篇关于嵌套元素中的iOS Safari onscroll事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
