Question

因此，我尝试使用3个div元素构建滚动指示器。所有代码（即3 div HTML，CSS，JS）似乎都可以在codepen.io中单独工作，但是当我将Atom与其余部分或项目一起使用时，似乎就无法工作了。

我尝试将3 div放在第一位。一直到最后。使用其他div作为父母，但似乎无济于事。

  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 + "%";
  }

*{
  padding: 0;
  margin: 0
}
 /* Global Stylings */



/* ID and Class Stylings */

#containter {
  width: 100%;
  height: 100vh;
  scroll-behavior: smooth;
  overflow: auto;
  scroll-snap-type: y mandatory;
}

#Landing{
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: ;
  width: 100%;
  height: 100vh;
}

#projects {
  background-color: ;
  width: 100%;
  height: 100vh;
}

#gallery {
  background-color: ;
  width: 100%;
  height: 100vh;
}

#logo{
  width: 30em;
  height: 30em;
}

.scroll {
  scroll-snap-align: start;
}

.scrollindicator {
  position: fixed;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: #f1f1f1;
}

.progress-container {
  width: 8px;
  height: 100%;
  background: #ccc;
}

/* The progress bar (scroll indicator) */
.progress-bar {
  height: 0%;
  background: #4caf50;
  width: 8px;

<div id="containter" class="snap">
      <div class="progress-container">
        <div class="progress-bar" id="myBar"></div>
      </div>
    </div>
      <div id="Landing" class="scroll">
        <img id="logo" src="AC-Logo.png" alt="Logo">
     </div>
      <div id="projects" class="scroll">
      </div>
      <div id="gallery" class="scroll">
      </div>
    </div>
    <script src="scroll.js">
    </script>
  </body>

div ID = myBar应该显示整个页面的滚动进度，并且应该始终可见。

Answer 1

您的CSS样式错误。查看代码段！

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 + "%";
  }

*{
  padding: 0;
  margin: 0
}
 /* Global Stylings */



/* ID and Class Stylings */

#containter {
  width: 100%;
  height: 100vh;
  scroll-behavior: smooth;
  overflow: auto;
  scroll-snap-type: y mandatory;
  position: fixed; // Make the bar stick to the left of the screen
}

#Landing{
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: ;
  width: 100%;
  height: 100vh;
}

#projects {
  background-color: ;
  width: 100%;
  height: 100vh;
}

#gallery {
  background-color: ;
  width: 100%;
  height: 100vh;
}

#logo{
  width: 30em;
  height: 30em;
}

.scroll {
  scroll-snap-align: start;
}

.scrollindicator {
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: #f1f1f1;
}

.progress-container {
  width: 8px;
  height: 100%;
  position: fixed;
}

/* The progress bar (scroll indicator) */
.progress-bar {
  height: 0%;
  background: #ccc; // Set color to the actual bar that changes height
  width: 8px;

    <div id="containter" class="snap">
      <div class="progress-container">
        <div class="progress-bar" id="myBar"></div>
      </div>
    </div>
    <div id="Landing" class="scroll">
      <img id="logo" src="AC-Logo.png" alt="Logo">
   </div>
    <div id="projects" class="scroll">
    </div>
    <div id="gallery" class="scroll">
    </div>
    <script src="scroll.js">
    </script>

Answer 2

将position: fixed添加到班级进度容器中。

编辑：scroll-snap-type无法正常工作，因为您的元素未包含在具有属性scroll-snap-type: y mandatory;的容器中。因此，我将所有内容添加到“容器”中，使css属性再次起作用。

必须对Javascript进行一些更改，以便自定义滚动条可以再次使用。

function myFunction() {
    var elem = document.getElementById('containter');
    var winScroll = elem.scrollTop;
    var height = elem.scrollHeight - document.documentElement.clientHeight;
    var scrolled = (winScroll / height) * 100;
    document.getElementById("myBar").style.height = scrolled + "%";
}

*{
  padding: 0;
  margin: 0
}
 /* Global Stylings */



/* ID and Class Stylings */

#containter {
  width: 100%;
  height: 100vh;
  scroll-behavior: smooth;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

#Landing{
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: red;
  width: 100%;
  height: 100vh;
}

#projects {
  background-color: blue;
  width: 100%;
  height: 100vh;
}

#gallery {
  background-color: pink;
  width: 100%;
  height: 100vh;
}

#logo{
  width: 30em;
  height: 30em;
}

.scroll {
  scroll-snap-align: start;
}

.scrollindicator {
  position: fixed;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: #f1f1f1;
}

.progress-container {
  width: 8px;
  height: 100%;
  background: #ccc;  
  position: fixed;
}

/* The progress bar (scroll indicator) */
.progress-bar {
  height: 0%;
  background: #4caf50;
  width: 8px;
}

<body>
  <div onscroll="myFunction()" id="containter" class="snap">
    <div class="progress-container">
      <div class="progress-bar" id="myBar"></div>
    </div>

    <div id="Landing" class="scroll">
      <img id="logo" src="AC-Logo.png" alt="Logo">
    </div>
    <div id="projects" class="scroll"></div>
    <div id="gallery" class="scroll"></div>
  </div>
  <script src="scroll.js"></script>
</body>

如何使此代码与其余代码一起工作？

2 个答案: