Overview
descartia.js is a simple and fast JavaScript library which enables smooth inertial scroll compatible with flick scrolling of mobile devices.
descartia.js（デカルティア.js）はスマホやタブレットなどの慣性スクロールとほぼ同等のスムーズスクロールをデスクトップブラウザ上で実現する軽量で高速なJavaScriptライブラリです。
Demo → https://falcema.github.io/descartia/
Feature
- descartia.js calculates scroll animation based on physical attenuation
- descartia.js uses requestAnimationFrame() method to render scroll animation.
- descartia.js has own requestAnimationFrame() queue inside, and it keeps the appropriate number of render requests.
- descartia.js does not break browsers' default scroll functions.
( You can use scrollTo(), scrollBy(), browsers' scroll bars, etc. ) - descartia.js can detect window width, and change its behavior. So you can use it in a responsive layout.
- descartia.js stops working automatically on mobile touchscreen devices to prevent conflict with native scroll.
- descartia.js stops working automatically on Mac laptops to prevent conflict with native inertial scroll of the trackpad. (Experimental)
How to use
1. Load File
Load descartia.js
htmlにdescartia.jsを読み込む
<script src="descartia.js"></script>2. Write HTML in the proper style
html要素を下のようにマークアップする
<body>
<div class="d-page">
<div class="d-table">
Page Contents.
</div>
</div>
<div class="d-dummy-scroll">
</div>
</body>3. Apply styles to the elements
スタイルを以下のように適用する
.d-page{
width: 100%;
height: 100%;
overflow: hidden;
}
.d-page-fixed{
position: fixed;
}
.d-dummy-scroll{
width: 100%;
height: 0;
position:absolute;
top: 0;
left: 0;
z-index: -1;
}OR load css
<link rel="stylesheet" type="text/css" href="descartia.style.css">descartia.js calculates scrollable length from height of .d-table. All child elements of .d-table should be position: static; (default of position). In the case of using 'fixed' or 'absolute', proper height value must be applied to .d-table before descartia.js execution and after every resize event. (not recommended)
Methods
To start (and resume) descartia.js
descartia.jsを動作させるには以下のメソッドを呼び出します
Descartia.start();This method initializes variables related to HTML elements, ids, and classes, and
can be used only once. If you want to use it again, for example in the case of pjax / ajax, call Descartia.disable(); or Descartia.pause(); first. Then you will able to call this method again.
To disable smooth scroll and enable default scroll
descartia.jsを無効にして標準スクロールに切り替える場合
Descartia.disable();To pause smooth scroll and other descartia.js events
descartia.jsのイベントとレンダリングを一時停止する場合
Descartia.pause();Optional: To set minimum window width limit descartia.js works. (This method should be declared before Descartia.start();)
レスポンシブレイアウトでスムーススクロールが無効化されるウィンドウ幅を設定したい場合、以下のメソッドをDescartia.start();の前に呼び出します。
Descartia.setMinWidth(width_value_without_px);
Descartia.setMinWidth(600); //descartia.js stops and default scroll will be enabled if width <= 600
Descartia.setMinWidth(); //null will clear min width limitOptions
I'll write this section later.
License
This software is released under the MIT License.
(C) 2019 Richard Falcema.