【JavaScript】によるスクロールバー制御の計算

スマホで画像を横スクロールにし、スクロールバーも画像に合わせてスクロールする様にjsで制御したいです。

デザインされたスクロールバーなのでcssだけでは難しい感じです。
progressBarとprgoressCircleという2つの要素が画像の横スクロールに合わせて伸びていく様な実装をしたいです。
（Circleの方は移動していくイメージ）

cssでBarとCircleをそれぞれwidth0とleft0にして、javascriptで、画像のスクロール値を取得して、widthとleftに代入して伸ばしていく実装をしたいです。
数値までは取れたのですが、12％ほどで止まってしまうので、ちゃんとスクロールに合わせて伸びたり縮んだりするスクロールバーにしたいです。

pug
1.lSolution-flowFigure
2          +cImg({src: 'https://placehold.jp/700x400.png'}).lSolution-flowImage
3        .lSolution-progress._sp
4          .lSolution-progressBar
5            .lSolution-progressCircle

scss
1.lSolution {
2 &-flowFigure {
3      overflow-x: auto;
4      overflow-y: hidden;
5      white-space: nowrap;
6    }
7    &::-webkit-scrollbar {
8      display: none;
9    }
10  }
11  &-progress {
12    position: relative;
13    background-color: rgba(#000, 0.4);
14    margin-left: auto;
15      height: 2px;
16      width: calc(100% - 4px);
17  }
18  &-progressBar {
19    position: absolute;
20    background: linear-gradient(
21      to left,
22      transparent calc(4 * 1.5),
23      $color-font calc(4 * 1.5)
24    );
25    width: 0;
26    top: 50%;
27    transform: translateY(-50%);
28    @include media-sp {
29      height: 4;
30    }
31  }
32  &-progressCircle {
33    position: absolute;
34    background-color: #000;
35    top: 0;
36    bottom: 0;
37    margin-top: auto;
38    margin-bottom: 0;
39    @include media-sp {
40      width: 4px;
41      height: 4px;
42      border-radius: 50;
43      transform: translateX(-3);
44    }
45  }
46}

javascript
1class PageCurrent extends Page {
2
3  onInit() {
4    this.figure = document.querySelector('.lSolution-flowFigure')
5    this.image = document.querySelector('.lSolution-flowImage')
6    this._progress = document.querySelector('.lSolution-progress')
7    this.progressCircle = document.querySelector('.lSolution-progressCircle')
8    this.progressBar = document.querySelector('.lSolution-progressBar')
9
10    this.progressTotal = this._progress.getBoundingClientRect().width
11    this.progressStart = this._progress.scrollLeft
12    this.progressOffset = this._progress.offsetLeft
13    this.initEvent()
14  }
15
16
17  initEvent() {
18    this.figure.addEventListener('scroll', () => {
19      this.progressValue =
20        (this.progressOffset - this.progressStart) / this.progressTotal
21      this._setProgress(this.progressValue * 100 + '%')
22    })
23  }
24  /**
25   *
26   */
27  _setProgress(_x) {
28    gsap.set(this.progressBar, {
29      width: _x,
30    })
31    gsap.set(this.progressCircle, {
32      left: _x,
33    })
34    gsap.to(this.progressBar, {
35      width: _x,
36      duration: 0.5,
37      ease: 'ease2.out',
38    })
39    gsap.to(this.progressCircle, {
40      left: _x,
41      duration: 0.5,
42      ease: 'ease2.out',
43    })
44  }
45}
46
47new PageCurrent()