HTML CSS

スクロールバーを%表示にすること出来ますか？

質問者からの補足コメント

• ここまで来たら25%、半分辺りまで来たら50%と表示する感じです。どこかのサイトでそういうのを見つけて

    補足日時：2021/06/08 23:24

No.3 回答者： fujillin 回答日時： 2021/06/09 12:13

No1です。

＞ここまで来たら25%、半分辺りまで来たら50%と表示する感じです
スクロールバーに組み込むわけではなく、どこかに値を表示するだけなら、No1に挙げたカスタマイズ等は不要ですね。
表示用のDIVでも作成して、position:fixed などにしておいて、スクロール量から計算した値を表示するだけで済みます。

とは言っても、多少面倒ですけれど…
基本的に%値は
　「現在のスクロール量」 / 「最大スクロール量」 * 100
で求められます。

「現在のスクロール量」は window.scrollY で求められます。
一方で、「最大スクロール量」に対する概念はあるようですが、fx以外は実装されていないようです。
https://developer.mozilla.org/ja/docs/Web/API/Wi …
https://caniuse.com/?search=window.scrollMaxY

ですので、「最大スクロール量」は計算で求めることになりますが、
　「文書全体の高さ」-「ビューポートの高さ」
として求めることになりそうです。

ひとまず、このくらいまで分解しておけば、個々の値の算出方法は検索すれば見つかると思いますし、本当に実装なさるおつもりがあるのかどうかも不明なので、以下は省略します。

No.2 回答者： かわごえ 回答日時： 2021/06/08 22:42

位置を？領域を？

なんでそんな意味ない事にリソースを割くのか理解できませんけども
ご自身の目的を伝わるように明示しないと回答もきませんよ

No.1 回答者： fujillin 回答日時： 2021/06/08 22:13

こんばんは

＞%表示にすること出来ますか？
どのように「%表示」したいのか不明ですが、スクリプトを使えば可能そうに思います。
（表示をどのようにするのか、工夫が必要ではないかと思いますけれど…）

「%表示」そのものではありませんけれど、スクリプトを利用したカスタマイズ例を解説しているサイトをご参考までに。
https://hsmt-web.com/blog/css-js-scrollbar/
https://shanabrian.com/web/library/flexcroll.php

検索すれば他にもいろいろ見つかると思います。