iScroll.jsを使用してコンテンツを横スクロールにする

現在横スクロールを実現するために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件

ベストアンサー

私は使ったことは無かったので多少無駄の多いコードになってしまいましたけど、こんな感じでしょうか?

lang
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>iscroll_test</title>
6<!--<script src="(適当なパス)/build/iscroll.js"></script>-->
7<style>
8* {
9  margin: 0px;
10  padding: 0px;
11}
12#scroller {
13  position: absolute;
14  top: 0px;
15  left: 0px;
16  display: flex;
17  flex-direction: row-reverse;
18  height: 93vh;
19}
20
21.column {
22  width:100vw;
23  height: 100vh;
24}
25
26.column.one {
27  background: #e6e6fa;
28}
29.column.two {
30  background: #2f4f4f;
31}
32.column.three {
33  background: #4169e1;
34}
35</style>
36<script>
37var myScroll;
38
39document.addEventListener('DOMContentLoaded',function(){
40  var columnNum = document.getElementsByClassName("column").length;
41  var startX = -window.innerWidth*(columnNum-1);
42
43  myScroll = new IScroll('#scroll-wrapper', {
44    scrollX: true,
45    scrollY: false,
46    mouseWheel: true,
47    freeScroll: true,
48    invertWheelDirection: true,
49    startX: startX
50  });
51});
52</script>
53</head>
54<body>
55  <div id="scroll-wrapper">
56    <div id="scroller">
57      <div class="column one">1カラム</div>
58      <div class="column two">2カラム</div>
59      <div class="column three">3カラム</div>
60    </div>
61  </div>
62</body>
63</html>

投稿2017/09/20 04:18

編集2017/09/20 14:02

namnium1125

総合スコア2043

rishi

2017/09/20 04:49 編集

ご回答ありがとうございます！カラム1が一番はじめに見えるコンテンツとして表示させたいです。。。またコンテンツが増えるごとにleftの指定をするのは避けたいのでスクロールするたびにtranslateXの値をプラスにしていくことは可能でしょうか？？とても丁寧に回答していただいたのにも関わらず申し訳ありません。

namnium1125

2017/09/20 12:43 編集

返信が遅くなってしまいすみません(> <) 外出しており実行環境が無かったんです..(^ ^; 回答を編集しました。translateXを使いませんでしたが、多分これで行けると思います。 (divの数に対応してstartXを決めています。) あとおせっかいかもしれませんがcolumはcolumnに直しておきました。一応、過去のものが見たければ右下の編集リンクから見れるはずです。

rishi

2017/09/21 05:49

こちらこそ遅くなってしまい、申し訳ございません！実装したところ自分の意図した結果になっていました！！本当に感謝いたします。。。ありがとうございます！！！今後ともよろしくお願いいたします！

行動規範の内容に同意します