如何使用 JavaScript 获取滚动条的高度？

给定一个 HTML 文档，任务是使用 JavaScript 获取滚动条的高度。以下是解决此问题的不同方法，将在下面讨论：

方法 1：在这种方法中，创建一个包含滚动条的 div 元素。要获得滚动条的高度，需要从 div 的 clientHeight 中减去 div 的 offsetHeight。

• OffsetHeight = 元素高度 + 滚动条高度。
• ClientHeight = 元素的高度。
• 滚动条的高度 = offsetHeight – clientHeight。

示例：此示例实现了上述方法。

HTML

  
  
    
  
       
        h1 { 
            color:green; 
        } 
        #geek1 {  
            width: 300px;  
            overflow-y:hidden; 
            border:1px solid black; 
            white-space: nowrap;
        } 
        #geek2 { 
            font-size: 20px;  
            font-weight: bold; 
        } 
        #geek4 { 
            font-size: 24px;  
            font-weight: bold; 
            color: green; 
        } 
     
  
    
  
     
    GeeksforGeeks 
        
     
        
     
        Bokeh is a Python interactive data 
        visualization. It renders its plots
        using HTML and JavaScript. 
     
        
     
        
     
        Click Here 
     
        
     
        
     
        var element = document.getElementById('geek1'); 
        var el_up = document.getElementById('geek2'); 
        var el_down = document.getElementById('geek4'); 
            
        el_up.innerHTML = "To get " 
                    + "the height of the scrollbar."; 
            
        function geek3() { 
            el_down.innerHTML = element.offsetHeight  
                        - element.clientHeight + "px"; 
        } 
     
     
  

输出：

在点击按钮之前：

点击按钮后：

方法 2：在这种方法中，创建了一个外部 div 元素，并且在这个外部 div 元素中，还创建了一个内部 div 元素。要获得滚动条的高度，需要从外部 div 中减去内部 div 的高度。

示例 2：此示例实现了上述方法。

HTML

  
  
    
  
         
     
        h1 { 
            color:green; 
        } 
        #geek1 {  
            width: 300px;  
            overflow-y:hidden; 
            border:1px solid black; 
            white-space: nowrap;
        } 
        #geek2 { 
            font-size: 20px;  
            font-weight: bold; 
        } 
        #geek4 { 
            font-size: 24px;  
            font-weight: bold; 
            color: green; 
        } 
     
  
    
  
     
    GeeksforGeeks 
        
     
        
     
         
            Bokeh is a Python interactive data 
            visualization. It renders its plots
            using HTML and JavaScript. 
        
     
        
     
        
     
        Click Here 
     
        
     
        
     
        var element = document.getElementById('geek1'); 
        var el_up = document.getElementById('geek2'); 
        var el_down = document.getElementById('geek4'); 
            
        el_up.innerHTML = "To get " 
                    + "the height of the scrollbar."; 
            
        function geek3() { 
            var child = document.querySelector("#geek5"); 
            var scroll = child.parentNode.offsetHeight
                        - child.offsetHeight;
            el_down.innerHTML = scroll + "px"; 
        } 
     
     
  

输出：

在点击按钮之前：

点击按钮后：