2017-11-21 5 views
0

モバイルブラウザで実行されるウェブアプリ用の水平スライダーがあります。スワイプジェスチャーによってスクロールが終了した時点で、いくつかのスタイリングを適用したいと思います。これは私がスクロールはによって引き起こさ終了時で特に興味を持って、私は、ユーザーが完全に要素をスクロールしたとき見つけることに興味がないことに注意してください、私のHTMLとCSSスワイプジェスチャーに起因するスクロールがモバイルウェブブラウザで終了したことをどのように検出しますか?

.container { 
 
    display: flex; 
 
    overflow: scroll; 
 
} 
 

 
.box { 
 
    flex-shrink: 0; 
 
    width: 25%; 
 
    height: 50px; 
 
    background: yellow; 
 
} 
 

 
.box+.box { 
 
    margin-left: 15px; 
 
}
<body> 
 
    <div class="container"> 
 
    <div class="box"> 
 
    </div> 
 
    <div class="box"> 
 
    </div> 
 
    <div class="box"> 
 
    </div> 
 
    <div class="box"> 
 
    </div> 
 
    <div class="box"> 
 
    </div> 
 
    <div class="box"> 
 
    </div> 
 
    </div> 
 
</body>

ですスワイプジェスチャー。ブラウザの場合はscrollStartまたはscrollEndイベントはありませんが、scrollイベントしかありませんが、scrollイベントにはこの後にscrollイベントがないことがわかります。

+0

スクロールイベントの後に[https://developer.mozilla.org/en-US/docs/Web/Events/touchend] touchendイベントを使用しますが、に注意することができますアンカー、入力、または実際にスクロールの一部ではない実行可能なDOM要素にバインドしないようにしてください。 –

答えて

関連する問題