横スクロールのページの進捗をプログレスバーで可視化したい

Question

https://nelog.jp/scrolline-js

上記のサイトを参考に横スクロールするサイトにプログレスバーを表示しようとしています。

そのまま実装したら、通常のスクロールにしか対応していないため
すでにスクロールバーが100%の状態で表示されてしまいました。

横スクロールに対応させる方法をご存知の方、ご教授いただけないでしょうか？
よろしくお願いいたします。

Answer 1

利用されているライブラリのソースを見てみましたが、オプション指定などで簡単に横スクロールに対応させる方法は無いようです。

Comments

[YuriY]

ありがとうございます。
やはりそうですよね。
自作するしかないのでしょうか、、、

縦と横の判定を変えればよいだけの気もしますので
トライしてみます。

[d-yosh]

scrollListenerでプログレスバーの長さを算出していますが、ここでscrollTopの値と画面の高さを利用して計算しているっぽいので、scrollLeftの値と画面の幅を利用して計算するように作り変えればなんとかなるかなと思いました。

[YuriY]

ありがとうございます。

var self = this,
hWin = $(window).height(),
wWin = $(window).width(),
hDoc = $(document).height(),
scrollValue = $(window).scrollLeft(),
wBack, hBack, wFront, hFront, scrollineVal, wRef;

この箇所を変更してみます！