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

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

方法一：

• 创建一个包含滚动条的元素 (div)。
• OffsetWidth 定义元素的宽度 + 滚动条的宽度。
• ClientWidth 定义元素的宽度。
• 所以滚动条可以定义为width = offsetWidth - clientWidth。

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

 
 
  
 
     
        How to get the width of scroll
        bar using JavaScript ?
    
      
    
        body {
            text-align:center;
        }
        h1 {
            color:green;
        }
        #div {
            width:200px; 
            height:150px; 
            overflow:auto;
            margin:auto;
            text-align:justify;
            border:1px solid black;
        }
        #GFG_UP {
            font-size: 17px; 
            font-weight: bold;
        }
        #GFG_DOWN {
            font-size: 24px; 
            font-weight: bold;
            color: green;
        }
    
 
  
 
      
    GeeksforGeeks
      
    
      
    
        JavaScript has stormed the web technology and
        nowadays small software ventures to fortune
        500, all are using node js for web apps. 
        Recently wordpress.com has rewritten its
        dashboard in javascript, paypal also chose to
        rewrite some of its components in java script.
        Be it google/twitter/facebook, javascript is
        important for everyone. It is used in 
        applications like single page applications,
        Geolocation APIs, net advertisements etc.
    
      
    
      
    
        click here
    
      
    
      
    
        var element = document.getElementById('div');
        var el_up = document.getElementById('GFG_UP');
        var el_down = document.getElementById('GFG_DOWN');
          
        el_up.innerHTML = "Click on the button to get "
                    + "the width of the scrollbar.";
          
        function GFG_FUN() {
            el_down.innerHTML = element.offsetWidth 
                        - element.clientWidth + "px";
        }
     
 
  

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

方法二：

• 创建一个外部 div 元素。
• 在外部 div 中创建一个 div，称为内部 div。
• 从外部 div 中减去内部 div 的宽度，得到滚动条宽度。

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

 
 
  
 
     
        How to get the width of scroll
        bar using JavaScript ?
    
      
    
        body {
            text-align:center;
        }
        h1 {
            color:green;
        }
        .outer {
            width:200px; 
            height:150px; 
            overflow-y:auto;
            margin:auto;
            text-align:justify;
            border:1px solid black;
        }
        #GFG_UP {
            font-size: 17px; 
            font-weight: bold;
        }
        #GFG_DOWN {
            font-size: 24px; 
            font-weight: bold;
            color: green;
        }
    
 
  
 
    GeeksforGeeks
      
    
      
    
        
            JavaScript has stormed the web technology and
            nowadays small software ventures to fortune
            500, all are using node js for web apps. 
            Recently wordpress.com has rewritten its
            dashboard in javascript, paypal also chose to
            rewrite some of its components in java script.
            Be it google/twitter/facebook, javascript is
            important for everyone. It is used in 
            applications like single page applications,
            Geolocation APIs, net advertisements etc.
        
    
      
    
      
    
        click here
    
      
    
      
    
        var element = document.getElementById('div');
        var el_up = document.getElementById('GFG_UP');
        var el_down = document.getElementById('GFG_DOWN');
          
        el_up.innerHTML = "Click on the button to get "
                    + "the width of the scrollbar.";
          
        function GFG_FUN() {
            var child = document.querySelector(".inner");
            var scroll = child.parentNode.offsetWidth - child.offsetWidth;
            el_down.innerHTML = scroll + "px";
        }
     
 
  

输出：

• 在点击按钮之前：
  
• 点击按钮后：