VNL Works
VNL Works
VNL Works
Demo

Scroll Progress Bar

実挙動はページ全体のスクロール量に依存するため、フルスクリーンで検証できます。

How to customize
  • • 高さ: --mk-scroll-progress-height
  • • 位置オフセット: --mk-scroll-progress-top(固定ヘッダーがある場合)
Tip: このページは検証用です。実案件では、ヘッダーの上に出す/下に出すなどを tokens で統一してください。
Section 01

Scroll-linked verification

このセクションはスクロール量を稼ぐための文章ブロックです。進捗バーが徐々に伸びていくか、 そしてスクロール最上部でバーが自動的に隠れる(デフォルト挙動)かを確認できます。

Expected

上端のバーが 0% → 100% まで滑らかに伸びる

Notes

固定ヘッダーの下に出したい場合は tokens の --mk-scroll-progress-topを調整してください。

Section 02

Scroll-linked verification

このセクションはスクロール量を稼ぐための文章ブロックです。進捗バーが徐々に伸びていくか、 そしてスクロール最上部でバーが自動的に隠れる(デフォルト挙動)かを確認できます。

Expected

上端のバーが 0% → 100% まで滑らかに伸びる

Notes

固定ヘッダーの下に出したい場合は tokens の --mk-scroll-progress-topを調整してください。

Section 03

Scroll-linked verification

このセクションはスクロール量を稼ぐための文章ブロックです。進捗バーが徐々に伸びていくか、 そしてスクロール最上部でバーが自動的に隠れる(デフォルト挙動)かを確認できます。

Expected

上端のバーが 0% → 100% まで滑らかに伸びる

Notes

固定ヘッダーの下に出したい場合は tokens の --mk-scroll-progress-topを調整してください。

Section 04

Scroll-linked verification

このセクションはスクロール量を稼ぐための文章ブロックです。進捗バーが徐々に伸びていくか、 そしてスクロール最上部でバーが自動的に隠れる(デフォルト挙動)かを確認できます。

Expected

上端のバーが 0% → 100% まで滑らかに伸びる

Notes

固定ヘッダーの下に出したい場合は tokens の --mk-scroll-progress-topを調整してください。

Section 05

Scroll-linked verification

このセクションはスクロール量を稼ぐための文章ブロックです。進捗バーが徐々に伸びていくか、 そしてスクロール最上部でバーが自動的に隠れる(デフォルト挙動)かを確認できます。

Expected

上端のバーが 0% → 100% まで滑らかに伸びる

Notes

固定ヘッダーの下に出したい場合は tokens の --mk-scroll-progress-topを調整してください。

Section 06

Scroll-linked verification

このセクションはスクロール量を稼ぐための文章ブロックです。進捗バーが徐々に伸びていくか、 そしてスクロール最上部でバーが自動的に隠れる(デフォルト挙動)かを確認できます。

Expected

上端のバーが 0% → 100% まで滑らかに伸びる

Notes

固定ヘッダーの下に出したい場合は tokens の --mk-scroll-progress-topを調整してください。

Try

ここから一度最下部までスクロール → その後トップへ戻る、の往復で更新が自然かを確認してください。

Section 07

Scroll-linked verification

このセクションはスクロール量を稼ぐための文章ブロックです。進捗バーが徐々に伸びていくか、 そしてスクロール最上部でバーが自動的に隠れる(デフォルト挙動)かを確認できます。

Expected

上端のバーが 0% → 100% まで滑らかに伸びる

Notes

固定ヘッダーの下に出したい場合は tokens の --mk-scroll-progress-topを調整してください。

Section 08

Scroll-linked verification

このセクションはスクロール量を稼ぐための文章ブロックです。進捗バーが徐々に伸びていくか、 そしてスクロール最上部でバーが自動的に隠れる(デフォルト挙動)かを確認できます。

Expected

上端のバーが 0% → 100% まで滑らかに伸びる

Notes

固定ヘッダーの下に出したい場合は tokens の --mk-scroll-progress-topを調整してください。

Section 09

Scroll-linked verification

このセクションはスクロール量を稼ぐための文章ブロックです。進捗バーが徐々に伸びていくか、 そしてスクロール最上部でバーが自動的に隠れる(デフォルト挙動)かを確認できます。

Expected

上端のバーが 0% → 100% まで滑らかに伸びる

Notes

固定ヘッダーの下に出したい場合は tokens の --mk-scroll-progress-topを調整してください。

Section 10

Scroll-linked verification

このセクションはスクロール量を稼ぐための文章ブロックです。進捗バーが徐々に伸びていくか、 そしてスクロール最上部でバーが自動的に隠れる(デフォルト挙動)かを確認できます。

Expected

上端のバーが 0% → 100% まで滑らかに伸びる

Notes

固定ヘッダーの下に出したい場合は tokens の --mk-scroll-progress-topを調整してください。

Section 11

Scroll-linked verification

このセクションはスクロール量を稼ぐための文章ブロックです。進捗バーが徐々に伸びていくか、 そしてスクロール最上部でバーが自動的に隠れる(デフォルト挙動)かを確認できます。

Expected

上端のバーが 0% → 100% まで滑らかに伸びる

Notes

固定ヘッダーの下に出したい場合は tokens の --mk-scroll-progress-topを調整してください。

Section 12

Scroll-linked verification

このセクションはスクロール量を稼ぐための文章ブロックです。進捗バーが徐々に伸びていくか、 そしてスクロール最上部でバーが自動的に隠れる(デフォルト挙動)かを確認できます。

Expected

上端のバーが 0% → 100% まで滑らかに伸びる

Notes

固定ヘッダーの下に出したい場合は tokens の --mk-scroll-progress-topを調整してください。