現在横スクロールを実現するためにiScroll.jsというライブラリを使用しています。
そこで横スクロールさせたいコンテンツの始点を右端にしスクロールすると左にコンテンツが移動するようにしたいのですが、iScroll.jsの仕様上スクロールするとtranslateXの値が負になってしまいます。
この値をプラスにし、コンテンツが右から左に移動するようにしたいのですが良い方法が思いつきません。
良い方法があれば教えていただきたいです。
実現したい動きをしているサイト
http://nenga.aisatsujo.jp/lp/eshi/
以下試みたコードとなります。
html
1<div id="scroll-wrapper"> 2 <div class="colum one">1カラム</div> 3 <div class="colum two">2カラム</div> 4 <div class="colum three">3カラム</div> 5</div> 6
css
1#scroll-wrapper { 2 position: absolute; 3 height: 93vh; 4 right: 0; 5 width:3000px; 6} 7 8.colum { 9 width:100vw; 10 height: 100vh; 11 float:right; 12} 13 14.colum.one { 15 background: #e6e6fa 16} 17.colum.two { 18 background: #2f4f4f; 19} 20.colum.three { 21 background: #4169e1; 22}
js
1var myScroll; 2 3document.addEventListener('DOMContentLoaded', function() { 4 myScroll = new IScroll('#scroll-wrapper', { 5 scrollX: true, 6 freeScroll: true, 7 mouseWheel: true 8 }); 9});
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/09/20 04:49 編集
2017/09/20 12:43 編集
2017/09/21 05:49