descartia-js

v1.0.2

Published

3 years ago

Inertial smooth scroll library

Downloads

0High
0Medium
0Low

falcema

scroll smooth inertial

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 limit

Options

I'll write this section later.

License

This software is released under the MIT License.
(C) 2019 Richard Falcema.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme