如何检查滚动条是否可见？

滚动条是一个小部件，其中放置了一些内容，并且该内容可以由用户沿指定方向滚动。要检查滚动条是否可见，我们可以使用我们自己的自定义函数。

示例 1：此示例显示了一个简单的代码片段，可用于检查水平或垂直滚动条是否可见。

  

    

    
    
        #geek {
            background-color: green;
            overflow: auto;
            float: left;
        }
          
        #inner {
            width: 150px;
            height: 250px;
        }
    
    
        function isScrollable(el) {
          
            /*The scrollTop() method sets or returns the 
            vertical scrollbar position for the selected elements*/
            var y1 = el.scrollTop; 
            el.scrollTop += 1;
            var y2 = el.scrollTop;
            el.scrollTop -= 1;
            var y3 = el.scrollTop;
            el.scrollTop = y1;
          
            /*The scrollLeft() method returns the horizontal 
            scrollbar position for the selected elements.*/
            var x1 = el.scrollLeft; 
            el.scrollLeft += 1;
            var x2 = el.scrollLeft;
            el.scrollLeft -= 1;
            var x3 = el.scrollLeft;
            el.scrollLeft = x1;
  
            //returns true or false accordingly
            return {
                horizontallyScrollable: x1 !== x2 || x2 !== x3, 
                verticallyScrollable: y1 !== y2 || y2 !== y3
            }
        }
  
        function check(id) {
            /*the data is JSON type, convert it to string and then
            check the element with given id for scrollbar*/
            alert(JSON.stringify(isScrollable(document.getElementById(id)))); 
              
        }
    

  

    
        
    
  
    
    
        scrollable 

  

输出：

示例 2：

  

    
  
    
        $(function() {
            alert('Div 1 has scroolbar: ' + $('#geek1').hasScrollBar());
            alert('Div 2 has scrollbar: ' + $('#geek2').hasScrollBar());
        });
  
        (function($) {
            $.fn.hasScrollBar = function() {
                return this.get(0).scrollHeight > this.height();
                /*The element will display a scrollbar 
                 if the scroll height is greater than the client height*/
            }
        })(jQuery);
    

  

    
        
        Welcome to the world of Geeks!! How many times were you 
      frustrated while looking out for a good collection of 
      programming/algorithm/interview questions? What did you 
      expect and what did you get? This portal has been created 
      to provide well written, well thought and well explained
      solutions for selected questions.
        
        
    
  
    
    
  
    
        * No scrollbar
    

  

输出：