jQuery
【jQuery】タッチデバイススナップスクロールflipsnap
September 6, 2018

flipsnap.jsはタッチデバイススナップスクロール。
ダウンロードして読み込む
<script src="flipsnap.js"></script>
HTMLは外側の要素と内側の要素を設定
<div class="viewport"> <div class="flipsnap"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> </div>
CSSを書く
.viewport { width: 320px; overflow: hidden; margin: 0 auto; -webkit-transform: translateZ(0); /* Optional: When heavy at iOS6+ */ } .flipsnap { width: 960px; /* 320px(item width) * 3(item count) */ } .flipsnap:after { content: ''; display: block; clear: both; height: 0; } .item { float: left; width: 310px; font-size: 50px; text-align: center; padding: 50px 0; background: #EFEFEF; border: 5px solid #999; color: #666; }
Flipsnap()内部要素のCSSセレクタを使用して呼び出します。
Flipsnap('.flipsnap');