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