如何制作垂直进度指示器图

时间：2019-06-29 17:33:48

标签： javascript html css

我正在为一个伙伴开发项目，我想知道如何才能实现类似于https://pudding.cool/2019/06/summer-reading/页上的书籍的垂直滚动效果。

我要复制的垂直滚动条指示器位于页面的右侧

我看了看代码，看起来他们使用了一个特定的类作为多个div，但是不确定是否有其他方法可以实现这一目标

编辑：当我发布此消息时很着急，更多信息如下。

我查看了有关如何创建滚动指示器的W3学校指南 https://www.w3schools.com/howto/howto_js_scroll_indicator.asp 并能够将其修改为固定的和垂直的，现在我正在研究使用此概念来反映上述目标结果。我整理了一个基本概念的小提琴

https://jsfiddle.net/sq0z314o/ 

// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.height = scrolled + "%";
}
/* Style the header: fixed position (always stay at the top) */
.scroll {
 position: fixed;
 top: 0;
 z-index: 1;
 height: 100%;
 background-color: #f1f1f1;
}

/* The progress container (grey background) */
.progress-container {
 height: 100%;
 width: 8px;
 background: #ccc;
}

/* The progress bar (scroll indicator) */
.progress-bar {
 width: 8px;
 background: #4caf50;
 height: 0%;
}
.content {
  width: 75%;
  margin: auto;
}
<div class="scroll">
    <div class="progress-container">
        <div class="progress-bar" id="myBar"></div>
    </div>
</div>
  
<div class = "content">      
     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius libero urna, eu aliquet tellus consequat a. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam vitae dignissim ante. Morbi maximus auctor diam porta vestibulum. Suspendisse et luctus ex, ut interdum risus. Proin mi elit, viverra quis rhoncus euismod, luctus ac lectus. Phasellus laoreet accumsan pretium. Sed aliquam vestibulum sapien, et malesuada ipsum gravida faucibus. Duis vestibulum at nibh id ullamcorper. Curabitur maximus consequat diam non lobortis. Etiam tristique neque enim.</p>
     <p> Nulla sem ex, ultrices at velit id, tempor consequat neque. Nulla at molestie mi, ullamcorper interdum purus. Cras elementum, orci a sollicitudin elementum, tellus sem sodales mi, eget consectetur mi nunc non velit. Maecenas id mauris massa. Donec sed eros erat. Nam interdum sollicitudin elementum. Maecenas laoreet commodo gravida. Duis orci dolor, aliquet sed viverra ut, euismod ac sem. In hendrerit nisl quis massa tristique, vitae cursus urna consectetur.</p>
     <p> Suspendisse maximus dapibus orci, sed faucibus leo iaculis sed. Sed quam ante, accumsan ac gravida ut, feugiat volutpat ligula. Sed aliquet nisi metus, a dapibus diam porttitor et. Suspendisse potenti. Mauris dapibus interdum orci at blandit. Vivamus sit amet turpis est. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
     <p> Etiam sodales id velit nec pulvinar. Nulla facilisi. Phasellus lobortis arcu a lobortis consectetur. Proin vitae laoreet odio. Ut sem purus, finibus non ante vitae, porttitor cursus leo. In sed dui lectus. Cras in enim vel ipsum fermentum condimentum. Praesent sit amet fringilla dui. Sed hendrerit varius enim vitae pulvinar. Duis hendrerit eleifend urna, eget cursus odio vulputate eu. Etiam pretium elit quis nibh tristique semper. Praesent vitae sem sed felis aliquam bibendum sed ac justo. Ut eu venenatis neque, vel tristique lacus. Etiam condimentum sit amet est in pulvinar.</p>
     <p> Sed ut pellentesque dolor. Suspendisse blandit tellus at orci pellentesque, a mattis diam dictum. Nullam condimentum et sapien sed tincidunt. Sed consequat urna nec arcu suscipit, vel dapibus elit porttitor. Suspendisse arcu est, ultrices vitae nisi nec, finibus malesuada ex. Aliquam erat volutpat. Fusce odio felis, posuere a dictum ut, dignissim dictum felis. Integer quis eros erat. Sed sed augue finibus, mattis nisl at, auctor orci. Praesent ex metus, viverra et molestie quis, suscipit eget quam. Praesent vehicula elementum tortor, sed dictum mauris. In lectus elit, gravida id iaculis nec, bibendum et ante.</p>
     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius libero urna, eu aliquet tellus consequat a. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam vitae dignissim ante. Morbi maximus auctor diam porta vestibulum. Suspendisse et luctus ex, ut interdum risus. Proin mi elit, viverra quis rhoncus euismod, luctus ac lectus. Phasellus laoreet accumsan pretium. Sed aliquam vestibulum sapien, et malesuada ipsum gravida faucibus. Duis vestibulum at nibh id ullamcorper. Curabitur maximus consequat diam non lobortis. Etiam tristique neque enim.</p>
</div>

1 个答案:

答案 0 :(得分：3)

如果可以确定滚动条的高度固定，则可以选择此处。希望对您有所帮助：

  • 我在.progress-container节点内复制了文本内容，并添加了另一个名为.content-little的类。它有position: absolute，因此它与滚动条重叠。
  • 我还向font-size添加了一些样式，例如向.content-little添加了一点width，向滚动条和子菜单添加了硬编码的height和window.onscroll = function() { var winScroll = document.body.scrollTop || document.documentElement.scrollTop; var height = document.documentElement.scrollHeight - document.documentElement.clientHeight; var scrolled = (winScroll / height) * 100; document.getElementById("myBar").style.height = scrolled + "%"; };。因此请注意CSS是不同的。

.scroll {
  position: fixed;
  top: 0;
  z-index: 1;
  height: 320px;
  background-color: #f1f1f1;
}

.progress-container {
  position: relative;
  height: 100%;
  width: 70px;
  background: #ccc;
  padding-left: 6px;
}

.progress-bar {
  position: absolute;
  left: -10px;
  width: 90px;
  background: #4caf50;
  height: 0%;
}
.content-little {
  position: absolute;
  font-size: 3px;
  width: 60px;
  height: 100%;
  overflow: hidden;
}
.content {
  width: 60%;
  margin: auto;
}
<div class="scroll">
  <div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
    <div class="content-little">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius libero
        urna, eu aliquet tellus consequat a. Class aptent taciti sociosqu ad
        litora torquent per conubia nostra, per inceptos himenaeos. Nam vitae
        dignissim ante. Morbi maximus auctor diam porta vestibulum. Suspendisse et
        luctus ex, ut interdum risus. Proin mi elit, viverra quis rhoncus euismod,
        luctus ac lectus. Phasellus laoreet accumsan pretium. Sed aliquam
        vestibulum sapien, et malesuada ipsum gravida faucibus. Duis vestibulum at
        nibh id ullamcorper. Curabitur maximus consequat diam non lobortis. Etiam
        tristique neque enim.
      </p>
      <p>
        Nulla sem ex, ultrices at velit id, tempor consequat neque. Nulla at
        molestie mi, ullamcorper interdum purus. Cras elementum, orci a
        sollicitudin elementum, tellus sem sodales mi, eget consectetur mi nunc
        non velit. Maecenas id mauris massa. Donec sed eros erat. Nam interdum
        sollicitudin elementum. Maecenas laoreet commodo gravida. Duis orci dolor,
        aliquet sed viverra ut, euismod ac sem. In hendrerit nisl quis massa
        tristique, vitae cursus urna consectetur.
      </p>
      <p>
        Suspendisse maximus dapibus orci, sed faucibus leo iaculis sed. Sed quam
        ante, accumsan ac gravida ut, feugiat volutpat ligula. Sed aliquet nisi
        metus, a dapibus diam porttitor et. Suspendisse potenti. Mauris dapibus
        interdum orci at blandit. Vivamus sit amet turpis est. Interdum et
        malesuada fames ac ante ipsum primis in faucibus.
      </p>
      <p>
        Etiam sodales id velit nec pulvinar. Nulla facilisi. Phasellus lobortis
        arcu a lobortis consectetur. Proin vitae laoreet odio. Ut sem purus,
        finibus non ante vitae, porttitor cursus leo. In sed dui lectus. Cras in
        enim vel ipsum fermentum condimentum. Praesent sit amet fringilla dui. Sed
        hendrerit varius enim vitae pulvinar. Duis hendrerit eleifend urna, eget
        cursus odio vulputate eu. Etiam pretium elit quis nibh tristique semper.
        Praesent vitae sem sed felis aliquam bibendum sed ac justo. Ut eu
        venenatis neque, vel tristique lacus. Etiam condimentum sit amet est in
        pulvinar.
      </p>
      <p>
        Sed ut pellentesque dolor. Suspendisse blandit tellus at orci
        pellentesque, a mattis diam dictum. Nullam condimentum et sapien sed
        tincidunt. Sed consequat urna nec arcu suscipit, vel dapibus elit
        porttitor. Suspendisse arcu est, ultrices vitae nisi nec, finibus
        malesuada ex. Aliquam erat volutpat. Fusce odio felis, posuere a dictum
        ut, dignissim dictum felis. Integer quis eros erat. Sed sed augue finibus,
        mattis nisl at, auctor orci. Praesent ex metus, viverra et molestie quis,
        suscipit eget quam. Praesent vehicula elementum tortor, sed dictum mauris.
        In lectus elit, gravida id iaculis nec, bibendum et ante.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius libero
        urna, eu aliquet tellus consequat a. Class aptent taciti sociosqu ad
        litora torquent per conubia nostra, per inceptos himenaeos. Nam vitae
        dignissim ante. Morbi maximus auctor diam porta vestibulum. Suspendisse et
        luctus ex, ut interdum risus. Proin mi elit, viverra quis rhoncus euismod,
        luctus ac lectus. Phasellus laoreet accumsan pretium. Sed aliquam
        vestibulum sapien, et malesuada ipsum gravida faucibus. Duis vestibulum at
        nibh id ullamcorper. Curabitur maximus consequat diam non lobortis. Etiam
        tristique neque enim.
      </p>
    </div>
  </div>
</div>

<div class="content">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius libero
    urna, eu aliquet tellus consequat a. Class aptent taciti sociosqu ad litora
    torquent per conubia nostra, per inceptos himenaeos. Nam vitae dignissim
    ante. Morbi maximus auctor diam porta vestibulum. Suspendisse et luctus ex,
    ut interdum risus. Proin mi elit, viverra quis rhoncus euismod, luctus ac
    lectus. Phasellus laoreet accumsan pretium. Sed aliquam vestibulum sapien,
    et malesuada ipsum gravida faucibus. Duis vestibulum at nibh id ullamcorper.
    Curabitur maximus consequat diam non lobortis. Etiam tristique neque enim.
  </p>
  <p>
    Nulla sem ex, ultrices at velit id, tempor consequat neque. Nulla at
    molestie mi, ullamcorper interdum purus. Cras elementum, orci a sollicitudin
    elementum, tellus sem sodales mi, eget consectetur mi nunc non velit.
    Maecenas id mauris massa. Donec sed eros erat. Nam interdum sollicitudin
    elementum. Maecenas laoreet commodo gravida. Duis orci dolor, aliquet sed
    viverra ut, euismod ac sem. In hendrerit nisl quis massa tristique, vitae
    cursus urna consectetur.
  </p>
  <p>
    Suspendisse maximus dapibus orci, sed faucibus leo iaculis sed. Sed quam
    ante, accumsan ac gravida ut, feugiat volutpat ligula. Sed aliquet nisi
    metus, a dapibus diam porttitor et. Suspendisse potenti. Mauris dapibus
    interdum orci at blandit. Vivamus sit amet turpis est. Interdum et malesuada
    fames ac ante ipsum primis in faucibus.
  </p>
  <p>
    Etiam sodales id velit nec pulvinar. Nulla facilisi. Phasellus lobortis arcu
    a lobortis consectetur. Proin vitae laoreet odio. Ut sem purus, finibus non
    ante vitae, porttitor cursus leo. In sed dui lectus. Cras in enim vel ipsum
    fermentum condimentum. Praesent sit amet fringilla dui. Sed hendrerit varius
    enim vitae pulvinar. Duis hendrerit eleifend urna, eget cursus odio
    vulputate eu. Etiam pretium elit quis nibh tristique semper. Praesent vitae
    sem sed felis aliquam bibendum sed ac justo. Ut eu venenatis neque, vel
    tristique lacus. Etiam condimentum sit amet est in pulvinar.
  </p>
  <p>
    Sed ut pellentesque dolor. Suspendisse blandit tellus at orci pellentesque,
    a mattis diam dictum. Nullam condimentum et sapien sed tincidunt. Sed
    consequat urna nec arcu suscipit, vel dapibus elit porttitor. Suspendisse
    arcu est, ultrices vitae nisi nec, finibus malesuada ex. Aliquam erat
    volutpat. Fusce odio felis, posuere a dictum ut, dignissim dictum felis.
    Integer quis eros erat. Sed sed augue finibus, mattis nisl at, auctor orci.
    Praesent ex metus, viverra et molestie quis, suscipit eget quam. Praesent
    vehicula elementum tortor, sed dictum mauris. In lectus elit, gravida id
    iaculis nec, bibendum et ante.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius libero
    urna, eu aliquet tellus consequat a. Class aptent taciti sociosqu ad litora
    torquent per conubia nostra, per inceptos himenaeos. Nam vitae dignissim
    ante. Morbi maximus auctor diam porta vestibulum. Suspendisse et luctus ex,
    ut interdum risus. Proin mi elit, viverra quis rhoncus euismod, luctus ac
    lectus. Phasellus laoreet accumsan pretium. Sed aliquam vestibulum sapien,
    et malesuada ipsum gravida faucibus. Duis vestibulum at nibh id ullamcorper.
    Curabitur maximus consequat diam non lobortis. Etiam tristique neque enim.
  </p>
</div>
gatsby-config.js

相关问题
最新问题