通过在页面上滚动来移动滚动条

Question

看一下下面的代码：

 function getScrollPercent() {
            const h = document.documentElement;
            const st = 'scrollTop';
            const sh = 'scrollHeight';
            const clientHeight = h.clientHeight;
            const scrollTop = h[st];
            const scrollHeight = h[sh];

            return scrollTop / (scrollHeight - clientHeight) * 100;
        }

        function update_scroll() {
            const scrollPercent = getScrollPercent();

            document.getElementById("scroll-line").style.height = `${scrollPercent}%`;
            document.getElementById("progress").textContent = Math.round(scrollPercent) + '%';
        }

        window.addEventListener('scroll', update_scroll);
        update_scroll();

 .content-site {
        height: 500vh;
    }

    #main_box {
        position: fixed;
        right: 50px;
        bottom: 80px;
    }

    #body_box {
        width: 100px;
        height: 100px;
        background: #b0ffcb;
        box-shadow: 0 0 4px #050030;
        border-radius: 50% !important;
        position: relative;
        overflow: hidden;
    }

    #progress {
        position: absolute;
        top: 40%;
        left: auto;
        z-index: 3;
        color: #f00;
        display: block;
        margin: 0 auto;
        width: 100%;
        text-align: center;
    }

    #scroll-line {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 50%;
        z-index: 2;
        background-color: #050030;
    }

    
    
    <div class="content-site"></div>
  
  <footer>
        <div id="main_box">
            <div id="body_box">
                <div id="scroll-line"></div>
                <p id="progress"></p>
            </div>
        </div>
    </footer>

如您所见，我实现了一个进度条，可以根据页面的滚动位置更改状态。

现在，我不想更改滚动时元素的背景颜色，而是想在元素周围创建一个进度环，以在页面滚动时更改其状态。

这是我正在寻找的示例：

https://codepen.io/christianmair/pen/dLVbze

上面例子的问题是它使用了SVG，这使得代码非常复杂。

我想用我迄今为止编写的代码来做到这一点，但是我尝试了很多方法，但未能达到预期的结果。

Answer 1

使用 SVG 更简单的解决方案。

function getScrollPercent() {
  const h = document.documentElement;
  const st = 'scrollTop';
  const sh = 'scrollHeight';
  const clientHeight = h.clientHeight;
  const scrollTop = h[st];
  const scrollHeight = h[sh];
  return scrollTop / (scrollHeight - clientHeight) * 100;
}

function update_scroll() {
  const scrollPercent = getScrollPercent();
  const circle = document.querySelector('.progress-ring__circle');
  const radius = circle.r.baseVal.value;
  const circumference = 2 * Math.PI * radius;
  const offset = circumference - scrollPercent / 100 * circumference;
  circle.style.strokeDashoffset = offset;
  document.getElementById("progress").textContent = Math.round(scrollPercent) + '%';
}
window.addEventListener('scroll', update_scroll);
update_scroll();

.content-site {
  height: 500vh;
}

#main_box {
  position: fixed;
  right: 50px;
  bottom: 80px;
}

#body_box {
  width: 100px;
  height: 100px;
  background: #b0ffcb;
  box-shadow: 0 0 4px #050030;
  border-radius: 50% !important;
  position: relative;
  overflow: hidden;
}

#progress {
  position: absolute;
  top: 40%;
  left: auto;
  z-index: 3;
  color: #f00;
  display: block;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

.progress-ring__circle {
  fill: none;
  stroke: #050030;
  stroke-width: 8;
  stroke-dasharray: 265;
}

.progress-ring__background {
  fill: none;
  stroke: #b0ffcb;
  stroke-width: 8;
}

.progress-ring__circle,
.progress-ring__background {
  stroke-linecap: round;
}

<div class="content-site"></div>

<footer>
  <div id="main_box">
    <div id="body_box">
      <svg class="progress-ring" width="100" height="100">
                <circle class="progress-ring__background" cx="50" cy="50" r="42"></circle>
                <circle class="progress-ring__circle" cx="50" cy="50" r="42"></circle>
            </svg>
      <div id="progress"></div>
    </div>
  </div>
</footer>