画面幅を超える要素を、マウスのドラッグで縦横にスクロールできるようにする機能です。
チルト機能のついていない標準的なマウスでインタラクティブにページの表示をできるようになります。
また、追加機能としてその要素が横スクロール可能でまだユーザがそのことに気づいていないとき、それを示すためにスクロールヒントを表示できます。これは主にスマートフォンでの閲覧者に対して効果を発揮します。
Options
const radix = new Radix({
dragScroll: {
active: true, // 機能のオン、オフ(boolean)
selector: '.radix-drag', // セレクタ
hint: true // ヒントを表示するか(boolean)
}
});
Example
radix-drag クラスをつけた場所の内部がドラッグ可能になります。
基本的には折り返しをすることができない table や img といった要素を、画面幅が狭い時にスクロールする為に設定します。
月 | 火 | 水 | 木 | 金 | |
---|---|---|---|---|---|
1 | 国語 | 算数 | 体育 | 国語 | 図工 |
2 | 算数 | 生活 | 国語 | 音楽 | 図工 |
3 | 生活 | 国語 | 算数 | 算数 | 国語 |
4 | 体育 | 道徳 | 読書 | 生活 | 体育 |
5 | 音楽 | 書写 | 学活 | 算数 |