如何使用 HTML CSS 和 JavaScript 创建滚动指示器？

滚动指示器是一个进度条，表示页面滚动了多少。当我们向下滚动时，栏会填满，当我们向上滚动时，栏量会减少。

方法：现在，我们将创建一个带有文本的基本网页以启用滚动，然后使用 JavaScript 使滚动指示器工作。

• HTML 代码：在本节中，我们将创建主体的基本结构。

  
  
    
  
      
      
  
    
  
      
    
      
  
    
      
      
  
          
  GeeksforGeeks
          
  GeeksforGeeks
          
  GeeksforGeeks
          
  GeeksforGeeks
          
  GeeksforGeeks
          
  GeeksforGeeks
      
  
    
  
  

• CSS 代码：在本节中，我们将添加一些 CSS 属性来设置样式以创建滚动指示器。

  方法：

  • window.innerHeight –浏览器可视部分的高度。
  • document.body.scrollHeight –网页的高度。
  • window.scrollY –到目前为止用户向下滚动的像素数。
  • maxHeight –计算用户可以滚动的像素数。
  • 百分比 – scrollIndicator 元素的宽度。
• 滚动指示器的 JavaScript 代码：

    
      // Added event listener to the scroll
      window.addEventListener('scroll',
              moveScrollIndicator);
    
      // Getting scrollIndicator element by ID
      const scrollIndicatorElt = 
          document.getElementById('scrollIndicator');
    
      // Height of entire web page - height
      // of viewable portion of browser
      const maxHeight = 
          window.document.body.scrollHeight 
          - window.innerHeight;
    
      function moveScrollIndicator(e) {
    
          // Calculating width of the 
          // scrollIndicator element
          const percentage = 
              ((window.scrollY) / maxHeight) * 100;
    
          // Pixels scrolled by the user 
          // to total scrollable Pixels
          scrollIndicatorElt.style.width
                   = percentage + '%';
      }

  完整代码：

    
  
      GFG : Scroll Indicator
      
          body {
              margin: 0;
          }
    
          .text {
              font-size: 80px;
              color: green;
              text-align: center;
              line-height: 3em;
          }
    
          .line {
              background: green;
              height: 8px;
              border-radius: 4px;
              width: 0%;
              position: fixed;
              top: 0;
          }
      
  
    
  
      
    
      
          GeeksforGeeks
          GeeksforGeeks
          GeeksforGeeks
          GeeksforGeeks
          GeeksforGeeks
          GeeksforGeeks
      
    
      
          window.addEventListener('scroll',
                  moveScrollIndicator);
    
          const scrollIndicatorElt =
              document.getElementById('scrollIndicator');
    
          const maxHeight =
              window.document.body.scrollHeight
              - window.innerHeight;
    
          function moveScrollIndicator(e) {
              const percentage = 
                  ((window.scrollY) / maxHeight) * 100;
    
              scrollIndicatorElt.style.width
                  = percentage + '%';
          }
      
  
    

  输出：