ScrollHint

Suggests that the elements are scrollable horizontally, with the pointer icon.

Installation

via npm

npm install scroll-hint --save

via yarn

yarn add scroll-hint

via cdn

<link rel="stylesheet" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css">
<script src="https://unpkg.com/scroll-hint@latest/js/scroll-hint.js"></script>

Browser support

モダンブラウザ (Chrome / Edge / Firefox / Safari の最新版) が対象です。Object.assign を使うため IE11 は非対応です。 アイコンの縮小表示には CSS コンテナクエリ (container-type: size) を使います。非対応のブラウザでは縮小せず、はみ出した部分はクリップされます。

Usage

import the js with babel and Browserify/Webpack

import ScrollHint from 'scroll-hint';
new ScrollHint('.js-scrollable');

Option

Development

lib/ と js/ はビルド成果物のため Git では管理せず、npm publish 時(prepack)に生成します。

npm ci
npm run dev        # ビルドの watch と examples/index.html の配信
npm test           # lint + テスト (カバレッジ 90% 未満で失敗)
npm run build      # lib/ (CJS/ESM) と js/ (ブラウザ向け) を生成

Release

npm run release:patch   # minor / major も同様

v*.*.* タグを push すると GitHub Actions が npm の Trusted Publishing (OIDC) で公開します。 事前に npmjs.com 側で、このリポジトリの publish.yml を Trusted Publisher として登録してください。