スクロールを実装するiScrollの使い方とオプションとdemo

iScrollとは

スクロールなどを簡単に実装することができるJSライブラリ。

パララックスやカルーセル(スライダー)なども実装可能。

ヘッダーやフッターをposition:fixedで固定してコンテンツ部分をスクロールしたいときの代替としてもよく使用される。

例えばヘッダーとフッターを上下に固定して中央のコンテンツのスクロールを実装する場合はこのようになる。
※デフォルト設定ではスワイプのスクロールのみに対応

iScroll デフォルト設定

なぜposition:fixedを使用しないの？

iScrollはposition:fixedだけでは実現できない機能が簡単に実装可能。また、Android 2.3以下だとposition:fixedが正しく機能しないことがあるため代替としてiScrollが使用されることが多い。

サポートブラウザ

ほとんどのモダンブラウザに対応
iPhoneやAndroidならよほど古くなければ使用できる
Internet ExplorerはIE9以上で使用可能

商用利用可能

iScrollはMITライセンスのため商用利用可能

使い方

iscroll.jsを読み込んで適用する要素を下記のように指定する。

<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.js"></script>
<script>
var myScroll;

document.addEventListener('DOMContentLoaded', function() {
  myScroll = new IScroll('#wrapper');
});
</script>

スクロールさせる要素はposition:absoluteで絶対位置。

body, ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#header,
#footer {
  position: absolute;
  width: 100%;
}
#header a,
#footer a {
  display: block;
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-decoration: none;
  text-align: center;
  background: #000;
  color: #fff;
}
#header a:hover,
#footer a:hover {
  background: #24890d;
}
#header {
  top: 0;
}
#header a {
  color: #fff;
}
#wrapper {
  position: absolute;
  z-index: 1;
  top: 30px;
  bottom: 30px;
  left: 0;
  width: 100%;
  overflow: hidden;
}
#wrapper li {
  padding: 10px 0;
  text-align: center;
}
#wrapper li + li {
  border-top: 1px solid #ccc;
}
#footer {
  bottom: 0;
}
#footer a {
  color: #fff;
  text-decoration: none;
}

iScroll デフォルト設定

マウスホイール有効化

mouseWheel:trueでマウスホイールでのスクロールが可能になる

var myScroll;

document.addEventListener('DOMContentLoaded', function() {
  myScroll = new IScroll('#wrapper', {
    mouseWheel: true
  });
});

マウスホイール有効化サンプル

タップイベント割り当て

tap:trueでタップイベントが使用可能に。iScrollはclickイベントではスマートフォンのタップ時に反応しないため。タップイベント割り当てが必要。

var myScroll;

document.addEventListener('DOMContentLoaded', function() {
  myScroll = new IScroll('#wrapper', {
    tap: true
  });
  var li = document.querySelectorAll('li');
  for(var i = 0; i &lt; li.length; i++) {
    li[i].addEventListener('tap', function () {
      this.style.background = !this.style.background ? '#f99' : '';
    });
  }
});

タップイベント割り当てサンプル

水平スクロール

scrollX:trueで水平スクロールが可能になる。scrollY:falseも忘れずに。

var myScroll;

document.addEventListener('DOMContentLoaded', function() {
  myScroll = new IScroll('#wrapper', {
    scrollX: true,
    scrollY: false,
    mouseWheel: true
  });
});

水平スクロールサンプル

clickイベント有効化

iScrollはclick:trueがないとclickイベントがスマートフォンで反応しない。

var myScroll;

document.addEventListener('DOMContentLoaded', function() {
  myScroll = new IScroll('#wrapper', {
    click: true
  });
});

タップしたとき指定した要素までスクロール

myScroll.scrollToElement(element)でタップした時に指定した要素までスクロールできる。例えば一番最初のliタグにid="first"を付けて下記のように記述すればタップ時にトップに戻ることができる。

var myScroll;

document.addEventListener('DOMContentLoaded', function() {
  myScroll = new IScroll('#wrapper', {
    click: true
  });
  var first = document.getElementById('first');
  var last = document.getElementById('last');
  first.addEventListener('click', function() {
    myScroll.scrollToElement(last);
  })
  last.addEventListener('click', function() {
    myScroll.scrollToElement(first);
  })
});

タップしたとき指定した要素までスクロールサンプル

無限スクロール
(ajaxで読み込みデータがあるかぎり)

いわゆる無限スクロール
iscroll-infinite.jsの読み込みが必要
infiniteElementsで読み込むデータを指定
infiniteLimitで読み込むデータ数を制限できる
datasetでajax読み込み
dataFillerで関数を指定してデータ更新
cacheSizeでキャッシュサイズ指定

function ajax (url, parms) {
	parms = parms || {};
	var req = new XMLHttpRequest(),
		post = parms.post || null,
		callback = parms.callback || null,
		timeout = parms.timeout || null;
	req.onreadystatechange = function () {
		if ( req.readyState != 4 ) return;
		if ( req.status != 200 && req.status != 304 ) {
			if ( callback ) callback(false);
			return;
		}
		if ( callback ) callback(req.responseText);
	};
	if ( post ) {
		req.open('POST', url, true);
		req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
	} else {
		req.open('GET', url, true);
	}
	req.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
	req.send(post);
	if ( timeout ) {
		setTimeout(function () {
			req.onreadystatechange = function () {};
			req.abort();
			if ( callback ) callback(false);
		}, timeout);
	}
}
var myScroll;

function updateContent(el, data) {
	el.innerHTML = data;
}

document.addEventListener('DOMContentLoaded', function() {
  myScroll = new IScroll('#wrapper', {
		mouseWheel: true,
		infiniteElements: '#wrapper > ul > li',
		infiniteLimit: 3000,
		dataset: requestData,
		dataFiller: updateContent,
		cacheSize: 1000
	});
});

function requestData(start, count) {
	ajax('dataset.php?start=' + +start + '&count=' + +count, {
		callback: function (data) {
			data = JSON.parse(data);
			myScroll.updateCache(start, data);
		}
	});
}

無限スクロールサンプル

縦、横、斜めにスクロール

scrollX:true, freeScroll:trueで縦、横、斜めにスクロールのが可能になる。

var myScroll;

document.addEventListener('DOMContentLoaded', function() {
  myScroll = new IScroll('#wrapper', {
    scrollX: true,
    freeScroll: true
  });
});

縦、横、斜めにスクロールサンプル

スクロールバーを表示

scrollbars:trueでCSSで描画したオリジナルのスクロールバーを表示。

ほかにもスクロールバーの表示に関するオプションがあるので必要に応じて追加する。

var myScroll;

document.addEventListener('DOMContentLoaded', function() {
  myScroll = new IScroll('#wrapper', {
    mouseWheel: true,
    scrollbars: true, /* スクロールバーを表示 */
    fadeScrollbars: true, /* スクロールバーをスクロール時にフェードイン・フェードアウト */
    interactiveScrollbars: true, /* スクロールバーをドラッグできるようにする */
    shrinkScrollbars: 'scale' /* スクロールバーを伸縮 */
  });
});

スクロールバーを表示サンプル

カスタムしたスクロールバーを表示

scrollbars:'custom'でカスタムスクロールバーの作成が可能になる。

var myScroll;

document.addEventListener('DOMContentLoaded', function() {
  myScroll = new IScroll('#wrapper', {
    mouseWheel: true,
    scrollbars: 'custom'
  });
});

CSSは下記のように指定。水平スクロールバーの場合、CSSクラス名は.iScrollHorizontalScrollbar

/* do not fix */
.iScrollVerticalScrollbar {
  overflow: hidden;
  position: absolute;
  z-index: 9999;
}

.iScrollVerticalScrollbar .iScrollIndicator {
  width: 100%;
}

/* styled scrollbars */
.iScrollVerticalScrollbar {
  width: 16px;
  top: 2px;
  right: 2px;
  bottom: 2px;
}

.iScrollIndicator {
  position: absolute;
  background: red;
  border: 3px solid green;
  border-radius: 5px;
  box-sizing: border-box;
}

カスタムしたスクロールバーを表示サンプル

パララックススクロール

パララックススクロールが可能になる。ほかのオプションよりもHTML, CSS, JavaScriptの変更箇所が多いので注意。

パララックスには最低3つの画像が必要なので事前に用意する。

indicators:で各オプションを設定

elは背景画像を表示させる要素を指定
resize: falseで画像の自動リサイズ無効化。(パララックスには必須)
ignoreBoundaries: trueでスクロール時の要素の境界を無効化。
(パララックスには必須)
speedRatioYでパララックス画像のスピード調整。0.5だと0.5倍速

JavaScript

var myScroll;

document.addEventListener('DOMContentLoaded', function() {
  myScroll = new IScroll('#wrapper', {
    mouseWheel: true,
    keyBindings: true,
    indicators: [{
      el: document.getElementById('snowfield1'),
      resize: false,
      ignoreBoundaries: true,
      speedRatioY: 0.2
    }, {
      el: document.getElementById('snowfield2'),
      resize: false,
      ignoreBoundaries: true,
      speedRatioY: 0.4
    }]
  });
});

HTML

<div id="wrapper">
  <div id="scroller"></div>
</div>

<div class="snowfield" id="snowfield2">
  <div id="snow2"></div>
</div>

<div class="snowfield" id="snowfield1">
  <div id="snow1"></div>
</div>

CSS

#wrapper {
  position: absolute;
  z-index: 3;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

#scroller {
  position: absolute;
  z-index: 3;
  width: 100%;
  height: 4000px;
  overflow: hidden;
  background: url(snow3.png);
}

.snowfield {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
}

.snowfield > div {
  position: absolute;
  width: 100%;
  overflow: hidden;
}

#snowfield1 {
  z-index: 1;
}

#snow1 {
  z-index: 1;
  height: 2000px;
  background: url(snow1.png);
}

#snowfield2 {
  z-index: 2;
}

#snow2 {
  z-index: 2;
  height: 2000px;
  background: url(snow2.png);
}

パララックススクロールサンプル

カルーセル（スライダー）

下記のオプションでカルーセル（スライダー）が実装可能。

インジケーターはCSSだけで作成可能。インジゲーターの現在位置の移動距離はindicatorの幅によって変わる。

JavaScript

var myScroll;

document.addEventListener('DOMContentLoaded', function() {
  myScroll = new IScroll('#wrapper', {
    scrollX: true,
    scrollY: false,
    snap: true,
    keyBindings: true,
    indicators: {
      el: document.getElementById('indicator'),
      resize: false
    }
  });
});

HTML

<div id="viewport">
  <div id="wrapper">
    <div id="scroller">
      <div class="slide slide1"><img src="slide1.jpg" width="300" height="200"></div>
      <div class="slide slide2"><img src="slide2.jpg" width="300" height="200"></div>
      <div class="slide slide3"><img src="slide3.jpg" width="300" height="200"></div>
      <div class="slide slide4"><img src="slide4.jpg" width="300" height="200"></div>
    </div>
  </div>
</div>

CSS

#viewport {
  overflow: hidden;
  position: relative;
  width: 300px;
  height: 200px;
  margin: 0 auto;
  background: #444;
}

#wrapper {
  width: 300px;
  height: 200px;
  margin: 0 auto;
}

#scroller {
  position: absolute;
  z-index: 1;
  width: 1200px;
  height: 200px;
  background-color: #444;
}

.slide {
  float: left;
  width: 300px;
  height: 200px;
}

#indicator {
  overflow: hidden;
  position: relative;
  width: 70px;
  height: 10px;
  margin: 10px auto;
}

#indicatorList li {
  list-style: none;
  float: left;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #EEE;
}

#indicatorList li:not(:last-child) {
  margin-right: 10px;
}

#dotty {
  position: absolute;
  z-index: 2;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #777;
}

カルーセル（スライダー）サンプル

キーの上下(↑ ↓)でスクロール

keyBindings:trueでキーの上下(↑ ↓)でスクロールが可能になる。スペースキーによるスクロールは不可。

スペースキーでスクロールしたい場合はkeysオブジェクトにspace:32を追加する。

var myScroll;

document.addEventListener('DOMContentLoaded', function() {
  myScroll = new IScroll('#wrapper', {
    keyBindings: true
  });
});

キーの上下(↑ ↓)でスクロールサンプル

指定した要素をスナップしてスクロール

snap:'li'のようにスナップさせる要素を指定。グリッドデザインだとピタッと吸着して途中で切れずに表示できるようになる。

var myScroll;

document.addEventListener('DOMContentLoaded', function() {
  myScroll = new IScroll('#wrapper', {
    snap: 'li'
  });
});

指定した要素をスナップしてスクロールサンプル

現在のスクロール位置表示

スクロール位置の取得にはiscroll-probe.jsの読み込みが必要
probeType: 3でスクロール位置の取得が可能
probeTypeは位置取得の精度のオプションで1から3まである。数字が大きいほどCPUの負担も大きくなるが通常であれば3でも問題ない
'scroll'でスクロール中の位置を取得
'scrollEnd'でスクロール終了後の位置を取得
this.y >> 0 はビットシフト演算子による小数点切り下げ

var myScroll;
var position;

function updatePosition () {
  position.innerHTML = this.y >> 0;
}

document.addEventListener('DOMContentLoaded', function() {
  position = document.getElementById('position');
  myScroll = new IScroll('#wrapper', {
    probeType: 3,
    mouseWheel: true
  });
  myScroll.on('scroll', updatePosition);
  myScroll.on('scrollEnd', updatePosition);
});

現在のスクロール位置表示サンプル

ピンチアウトでのズーム有効化

zoom:trueでズーム有効化。デフォルトでは無効化されている。

さらにiscroll.jsではなくiscroll-zoom.jsを読み込まないとズームを有効化できない。

var myScroll;

document.addEventListener('DOMContentLoaded', function() {
  myScroll = new IScroll('#wrapper', {
    zoom: true
  });
});

ピンチアウトでのズーム有効化サンプル

スクロールの有効化・無効化

// スクロールの有効化
myScroll.enable();

// スクロールの無効化
myScroll.disable();

スクロールの有効化・無効化サンプル

スクロール領域のリフレッシュ

あとからスクロール領域内にリストが追加されるなどして領域の高さや幅に変更があった場合、refresh()で領域をリフレッシュする必要がある。

var myScroll;

document.addEventListener('DOMContentLoaded', function() {
  myScroll = new IScroll('#wrapper', {
    mouseWheel: true
  });
  $('#a').on('click', function() {
    $('#wrapper > ul').append('<li>add list</li><li>add list</li><li>add list</li>')
  });
  $('#r').on('click', function() {
    myScroll.refresh();
  });
});

スクロール領域のリフレッシュサンプル

動作しないときの確認項目

iscroll.jsは読み込まれているか
iscroll-lite.jsが読み込まれていないか
iscroll-infinite.js, iscroll-probe.js, iscroll-zoom.jsでないと動作しないオプションではないか
HTML構造や要素名が正しく指定されているか
positionプロパティが正しく指定されているか
デフォルト設定ではスワイプのスクロールのみに対応
myScroll.disable();が有効になっていないか
scrollX:falseやscrollY:falseなどでスクロールが無効化されていないか
CDN利用の場合はネットに接続できているか

備考

iscroll-lite.jsという軽量化版もあるがほとんどの機能がなくなっているので極力使用しないほうが良い。
この記事に記載されているのはiScrollで使用頻度の高いオプション一覧であり、使用頻度の低いものに関しては割愛した。iScrollの詳細を知りたい方は公式サイトをご参照ください。

iScroll サンプル一覧

https://iwb.jp/s/iscroll-js-fixed-option-demo/

iScroll サンプル一覧ダウンロード

サンプル一覧ダウンロード

iScroll 公式サイト

http://cubiq.org/iscroll-5

iScroll CDN

https://cdnjs.com/libraries/iScroll

iScrollとは

なぜposition:fixedを使用しないの？

サポートブラウザ

商用利用可能

使い方

マウスホイール有効化

タップイベント割り当て

水平スクロール

clickイベント有効化

タップしたとき指定した要素までスクロール

無限スクロール (ajaxで読み込みデータがあるかぎり)

縦、横、斜めにスクロール

スクロールバーを表示

カスタムしたスクロールバーを表示

パララックス スクロール

JavaScript

HTML

CSS

カルーセル（スライダー）

JavaScript

HTML

CSS

キーの上下(↑ ↓)でスクロール

指定した要素をスナップしてスクロール

現在のスクロール位置表示

ピンチアウトでのズーム有効化

スクロールの有効化・無効化

スクロール領域のリフレッシュ

動作しないときの確認項目

備考

iScroll サンプル一覧

iScroll サンプル一覧 ダウンロード

iScroll 公式サイト

iScroll CDN

関連した記事

無限スクロール
(ajaxで読み込みデータがあるかぎり)

パララックススクロール

iScroll サンプル一覧ダウンロード