入れ子要素内のiOS Safari onscrollイベント

私の究極の目的は、横にスクロールする（-webkit-overflow-scrolling: touchを使用して）水平方向にスクロールするページにインラインdivを持たせることです。入れ子要素内のiOS Safari onscrollイベント

私はontouchendイベントへのアクセス権を持っているので、それが起こるとき、私は、この機能のために可能な限り最高のUXを実現するために、しかし、私のスナップを計算することができ、私は天然様を使用したいので、私は-webkit-overflow-scrollingせずにこのを達成することができますこの要素をスクロールします。

あなたの指をオフに撮影した後にフリック/いくつかの力を利用して、DIVは少しのためにスクロールしていきますされていることを-webkit-オーバーフロースクロールを使用しての問題点（すなわちontouchendが発射された後）。これは、スクロールが完了する前に私のスナップが計算されることを意味します。

私は長い間ラウンドを見つけようとしていましたが、私はまだ成功しませんでした。

ページ全体のコンテキストで、スクロールがが完了したときにonscrollイベントが発生すると、が発生します。私の質問は、このイベントを火災の要素内での範囲内で発動させることができるかどうかです。つまり、内側にスクロールして火をつけてください。<div id="slideShow">？

ない場合、例えばontouchmoveのいずれか

（a）のアクセス速度にそれが可能なので、スナップを実行するとき、私は計算することができますか？

又は

（B）-webkitオーバーフロースクロールをエミュレート：タッチ（弾力性と速度の効果）。

注：例として、iPad w/iOS5を使用しています。

出典

2012-01-20 sgb

scrollイベントは、スクロールが停止して完了した後にのみ、スクロールするコンテナごとに個別に、iOSでは発生します。コンテナのスクロールイベントを単に聴くことができます。ここで

は一例です：

<!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>

あなたが水平にテキストをスクロールしている、いないうちのdiv要素がスクロールされたときにのみ場合にアラートが表示されます。

出典

2012-01-22 14:57:05

優れています。あなたはスクロールの間にイベントが多くの時間を吹くかもしれない理由を知っていますか？あなたの例は動作しますが、もっと複雑な実装（より複雑なマークアップ、CSS）では、スクロールしながらイベントが発生します。 – sgb

更新：スクロールが複数回発生する原因となったタッチイベントにマウスイベントがバインドされました。私のせいで、助けてくれてありがとう。 – sgb

入れ子要素内のiOS Safari onscrollイベント

答えて

関連する問題