JavaScript 如何获取滚动条的高度

在这篇文章中，我们给出了一个HTML文档，任务是使用JavaScript获取滚动条的高度。以下是解决这个问题的不同方法：

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

offsetHeight=元素的高度+滚动条的高度。
clientHeight=元素的高度。
滚动条的高度=offsetHeight-clientHeight。

示例:

<!DOCTYPE HTML> 
<html> 
<head> 
    <style> 
        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;  
        }  
    </style> 
</head> 
  
<body> 
    <center> 
        <h1>GeeksforGeeks</h1> 
  
        <p id="geek2"></p> 
  
        <div id="geek1"> 
            Bokeh is a Python interactive data 
            visualization. It renders its plots 
            using HTML and JavaScript. 
        </div> 
  
        <br> 
  
        <button onclick="geek3()"> 
            Click Here 
        </button> 
  
        <p id="geek4"></p> 
  
        <script> 
            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";  
            }  
        </script> 
    </center> 
</body> 
</html>

输出：

JavaScript 如何获取滚动条的高度

方法2： 在这个方法中，创建一个外部div元素，然后在这个外部div元素中创建一个内部div元素。为了获取滚动条的高度，需要将内部div的高度减去外部div的高度。

示例：

<!DOCTYPE HTML> 
<html> 
<head> 
  
    <style> 
        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;  
        }  
    </style> 
</head> 
  
<body> 
    <center> 
        <h1>GeeksforGeeks</h1> 
  
        <p id="geek2"></p> 
  
        <div id="geek1"> 
            <div id="geek5"> 
                Bokeh is a Python interactive data 
                visualization. It renders its plots 
                using HTML and JavaScript. 
            </div> 
        </div> 
  
        <br> 
  
        <button onclick="geek3()"> 
            Click Here 
        </button> 
  
        <p id="geek4"></p> 
  
        <script> 
            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";  
            }  
        </script> 
    </center> 
</body> 
</html>

输出:

JavaScript 如何获取滚动条的高度