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

📅  最后修改于: 2021-10-28 03:15:11             🧑  作者: Mango

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

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

  • HTML 代码:在本节中,我们将创建主体的基本结构。
    
    
      
    
        
        GFG : Scroll Indicator
    
      
    
        
      
        
                
            
    GeeksforGeeks
            
    GeeksforGeeks
            
    GeeksforGeeks
            
    GeeksforGeeks
            
    GeeksforGeeks
            
    GeeksforGeeks
        
      
  • CSS 代码:在本节中,我们将添加一些 CSS 属性来设置样式以创建滚动指示器。
    
    

    方法:

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

    完整代码:

    
    
      
    
        GFG : Scroll Indicator
        
    
      
    
        
           
            
    GeeksforGeeks
            
    GeeksforGeeks
            
    GeeksforGeeks
            
    GeeksforGeeks
            
    GeeksforGeeks
            
    GeeksforGeeks
        
              

    输出:
    滚动指示器工作