복붙노트

[JQUERY] 스크롤을 볼 수 있는지 어떻게 확인할 수 있나요?

JQUERY

스크롤을 볼 수 있는지 어떻게 확인할 수 있나요?

해결법


  1. 1.그것을위한 약간의 플러그인.

    그것을위한 약간의 플러그인.

    (function($) {
        $.fn.hasScrollBar = function() {
            return this.get(0).scrollHeight > this.height();
        }
    })(jQuery);
    

    다음과 같이 사용,

    $('#my_div1').hasScrollBar(); // returns true if there's a `vertical` scrollbar, false otherwise..
    

    파이어 폭스, 크롬, IE6,7,8 작업을 테스트 한

    하지만 body 태그 선택기에서 제대로 작동하지

    편집하다

    난 당신이 표시 수직 스크롤이 발생 수평 스크롤이있을 때,이 기능이 작동하지 않는 것을 발견 ....

    나는 다른 해결책을 발견 ... 사용 clientHeight

    return this.get(0).scrollHeight > this.get(0).clientHeight;
    

  2. 2.어쩌면 더 간단한 해결책.

    어쩌면 더 간단한 해결책.

    if ($(document).height() > $(window).height()) {
        // scrollbar
    }
    

  3. 3.당신은 Element.scrollHeight 및 Element.clientHeight 속성의 조합을 사용하여이 작업을 수행 할 수 있습니다.

    당신은 Element.scrollHeight 및 Element.clientHeight 속성의 조합을 사용하여이 작업을 수행 할 수 있습니다.

    MDN에 따르면 :

    과:

    스크롤 높이가 클라이언트 높이보다 큰 경우 질문에 대한 대답은 그러므로, 요소는 스크롤 막대를 표시합니다 :

    function scrollbarVisible(element) {
      return element.scrollHeight > element.clientHeight;
    }
    

  4. 4.나는 Reigel이 말의 작은 일을 변경해야합니다 :

    나는 Reigel이 말의 작은 일을 변경해야합니다 :

    (function($) {
        $.fn.hasScrollBar = function() {
            return this[0] ? this[0].scrollHeight > this.innerHeight() : false;
        }
    })(jQuery);
    

    innerHeight는 컨트롤의 높이와 자사의 상단과 하단 패딩을 계산


  5. 5.이 Reigel의 대답 @에 확장합니다. 그것은 수평 또는 수직 스크롤에 대한 응답을 반환합니다.

    이 Reigel의 대답 @에 확장합니다. 그것은 수평 또는 수직 스크롤에 대한 응답을 반환합니다.

    (function($) {
        $.fn.hasScrollBar = function() {
            var e = this.get(0);
            return {
                vertical: e.scrollHeight > e.clientHeight,
                horizontal: e.scrollWidth > e.clientWidth
            };
        }
    })(jQuery);
    

    예:

    element.hasScrollBar()             // Returns { vertical: true/false, horizontal: true/false }
    element.hasScrollBar().vertical    // Returns true/false
    element.hasScrollBar().horizontal  // Returns true/false
    

  6. 6.당신은 element.scrollHeight이 필요합니다. .height의 $ (요소)와 비교 ().

    당신은 element.scrollHeight이 필요합니다. .height의 $ (요소)와 비교 ().


  7. 7.항목은 다음과 같은 CSS 속성 중 하나가 있는지 여부를 테스트 jQuery를위한 의사 선택 : 나는 새로운 정의했다 :

    항목은 다음과 같은 CSS 속성 중 하나가 있는지 여부를 테스트 jQuery를위한 의사 선택 : 나는 새로운 정의했다 :

    나는 또한 다른 작은 jQuery를 오버 플로우와 가장 가까운 부모를 찾기 위해 플러그인 썼다 그래서 나는 다른 요소의 가장 가까운 스크롤 부모를 찾을 싶었다.

    이 솔루션은 아마 최선을 수행하지 않지만, 작업에 나타나지 않습니다. 나는 $ .scrollTo 플러그인과 함께 그것을 사용. 가끔 요소가 다른 스크롤 컨테이너 내부인지를 알아야합니다. 이 경우 나는 창 대 부모 스크롤 요소를 스크롤합니다.

    아마 하나의 플러그인이 최대 포장과 플러그인의 일부뿐만 아니라 가까운 곳 (부모) 스크롤 컨테이너를 찾기 위해 '가장 가까운'방법을 노출 등으로 사이비 선택기를 추가해야합니다.

    됐건 .... 여기있다.

    $ .isScrollable jQuery 플러그인 :

    $.fn.isScrollable = function(){
        var elem = $(this);
        return (
        elem.css('overflow') == 'scroll'
            || elem.css('overflow') == 'auto'
            || elem.css('overflow-x') == 'scroll'
            || elem.css('overflow-x') == 'auto'
            || elem.css('overflow-y') == 'scroll'
            || elem.css('overflow-y') == 'auto'
        );
    };
    

    $ ( '스크롤') jQuery를 의사 선택 :

    $.expr[":"].scrollable = function(a) {
        var elem = $(a);
        return elem.isScrollable();
    };
    

    $ .scrollableparent () jQuery 플러그인 :

    $.fn.scrollableparent = function(){
        return $(this).closest(':scrollable') || $(window); //default to $('html') instead?
    };
    

    구현은 매우 간단하다

    //does a specific element have overflow scroll?
    var somedivIsScrollable = $(this).isScrollable();
    //use :scrollable psuedo selector to find a collection of child scrollable elements
    var scrollableChildren = $(this).find(':scrollable');
    //use $.scrollableparent to find closest scrollable container
    var scrollableparent = $(this).scrollableparent();
    

    UPDATE : 그의 $의 .scrollintoview () jQuery를 플러그인의 일환으로, 스크롤 축과 스크롤 컨테이너의 높이를 식별 스크롤 의사 선택 : 나는 로버트 Koritnik 이미 훨씬 더 강력한 해낸 것을 발견했다. scrollintoview 플러그인

    여기에 자신의 멋진 의사 선택 (소품)입니다 :

        $.extend($.expr[":"], {
    
        scrollable: function (element, index, meta, stack) {
    
            var direction = converter[typeof (meta[3]) === "string" && meta[3].toLowerCase()] || converter.both;
    
            var styles = (document.defaultView && document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(element, null) : element.currentStyle);
    
            var overflow = {
    
                x: scrollValue[styles.overflowX.toLowerCase()] || false,
    
                y: scrollValue[styles.overflowY.toLowerCase()] || false,
    
                isRoot: rootrx.test(element.nodeName)
    
            };
    
    
    
            // check if completely unscrollable (exclude HTML element because it's special)
    
            if (!overflow.x && !overflow.y && !overflow.isRoot)
    
            {
    
                return false;
    
            }
    
    
    
            var size = {
    
                height: {
    
                    scroll: element.scrollHeight,
    
                    client: element.clientHeight
    
                },
    
                width: {
    
                    scroll: element.scrollWidth,
    
                    client: element.clientWidth
    
                },
    
                // check overflow.x/y because iPad (and possibly other tablets) don't dislay scrollbars
    
                scrollableX: function () {
    
                    return (overflow.x || overflow.isRoot) && this.width.scroll > this.width.client;
    
                },
    
                scrollableY: function () {
    
                    return (overflow.y || overflow.isRoot) && this.height.scroll > this.height.client;
    
                }
    
            };
    
            return direction.y && size.scrollableY() || direction.x && size.scrollableX();
    
        }
    
    });
    

  8. 8.단지 IE에서 작동 위의 첫 번째 솔루션 단지 FF의 작품 위의 두 번째 솔루션

    단지 IE에서 작동 위의 첫 번째 솔루션 단지 FF의 작품 위의 두 번째 솔루션

    두 기능의 결합은 두 브라우저에서 작동 :

    //Firefox Only!!
    if ($(document).height() > $(window).height()) {
        // has scrollbar
        $("#mtc").addClass("AdjustOverflowWidth");
        alert('scrollbar present - Firefox');
    } else {
        $("#mtc").removeClass("AdjustOverflowWidth");
    }
    
    //Internet Explorer Only!!
    (function($) {
        $.fn.hasScrollBar = function() {
            return this.get(0).scrollHeight > this.innerHeight();
        }
    })(jQuery);
    if ($('#monitorWidth1').hasScrollBar()) {
        // has scrollbar
        $("#mtc").addClass("AdjustOverflowWidth");
        alert('scrollbar present - Internet Exploder');
    } else {
        $("#mtc").removeClass("AdjustOverflowWidth");
    }​
    

    HTH


  9. 9.(scrollWidth / 높이 - clientWidth / 높이) 스크롤의 존재에 대한 좋은 지표이지만, 많은 경우에 당신에게 "거짓 양성"답을 줄 것이다. 당신이 정확해야하는 경우 난 다음 함수를 사용하는 것이 좋습니다 것입니다. 대신 요소가 스크롤 경우 추측 노력하는 - 당신은 그것을 스크롤 할 수 있습니다 ...

    (scrollWidth / 높이 - clientWidth / 높이) 스크롤의 존재에 대한 좋은 지표이지만, 많은 경우에 당신에게 "거짓 양성"답을 줄 것이다. 당신이 정확해야하는 경우 난 다음 함수를 사용하는 것이 좋습니다 것입니다. 대신 요소가 스크롤 경우 추측 노력하는 - 당신은 그것을 스크롤 할 수 있습니다 ...

    기능 isScrollable (엘) { VAR Y1 = el.scrollTop; el.scrollTop + = 1; VAR Y2 = el.scrollTop; el.scrollTop - = 1; VAR Y3 = el.scrollTop; el.scrollTop = Y1; VAR의 X1은 el.scrollLeft를 =; el.scrollLeft + = 1; var에 X2는 el.scrollLeft를 =; el.scrollLeft - = 1; var에 X3는 el.scrollLeft를 =; el.scrollLeft은 X1을 =; 반환 { horizontallyScrollable! X1 == 2 배 || X2! == X3, verticallyScrollable! Y1 == Y2 || Y2! == Y3 } } 기능 체크 (ID) { 경고 (JSON.stringify (isScrollable (document.getElementById를 (ID)))); } # outer1, # outer2, # outer3 { 배경 색상 : 핑크; 오버 플로우 : 자동; 왼쪽으로 뜨다; } #inner { 폭 : 150 픽셀; 높이 : 150 픽셀; } 버튼 {마진 : 2EM 0 0 1em; }

    <버튼의 onclick = "체크 ( 'outer1')">의 경우, 체크로
    스크롤
    <버튼의 onclick = "체크 ( 'outer2')">의 경우, 체크로
    스크롤
    <버튼의 onclick = "체크 ( 'outer3')">의 경우, 체크로
    스크롤


  10. 10.여기에 윽 모든 사람의 대답은 불완전하고, SO에 jQuery를 사용하여 정지 이미하십시오 응답 할 수 있습니다. 당신이 JQuery와에 대한 정보를 원하는 경우 jQuery의 설명서를 참조하십시오.

    여기에 윽 모든 사람의 대답은 불완전하고, SO에 jQuery를 사용하여 정지 이미하십시오 응답 할 수 있습니다. 당신이 JQuery와에 대한 정보를 원하는 경우 jQuery의 설명서를 참조하십시오.

    다음 요소가 완전한 방법으로 스크롤바가 있는지 여부를 테스트하기위한 일반화 된 순수 자바 스크립트 기능입니다 :

    // dimension - Either 'y' or 'x'
    // computedStyles - (Optional) Pass in the domNodes computed styles if you already have it (since I hear its somewhat expensive)
    function hasScrollBars(domNode, dimension, computedStyles) {
        dimension = dimension.toUpperCase()
        if(dimension === 'Y') {
            var length = 'Height'
        } else {
            var length = 'Width'
        }
    
        var scrollLength = 'scroll'+length
        var clientLength = 'client'+length
        var overflowDimension = 'overflow'+dimension
    
        var hasVScroll = domNode[scrollLength] > domNode[clientLength]
    
    
        // Check the overflow and overflowY properties for "auto" and "visible" values
        var cStyle = computedStyles || getComputedStyle(domNode)
        return hasVScroll && (cStyle[overflowDimension] == "visible"
                             || cStyle[overflowDimension] == "auto"
                             )
              || cStyle[overflowDimension] == "scroll"
    }
    

  11. 11.나는 전적으로이 thread의 사람들이 포기되고, 나 같은, 사용 현대 JS 프레임 워크 중 하나가 아닌 JQuery와 그 불쌍한 영혼을 위해 더욱이를 확장하는거야 :

    나는 전적으로이 thread의 사람들이 포기되고, 나 같은, 사용 현대 JS 프레임 워크 중 하나가 아닌 JQuery와 그 불쌍한 영혼을 위해 더욱이를 확장하는거야 :

    이 각도 6 작성되었습니다하지만 반응 작성하는 경우 (16), 뷰 2, 고분자, 이온, 반작용 네이티브, 당신은 그것을 적응하기 위해 무엇을 알 수 있습니다. 쉽게해야하므로 그리고 전체 구성 요소입니다.

    import {ElementRef, AfterViewInit} from '@angular/core';
    
    @Component({
      selector: 'app',
      templateUrl: './app.html',
      styleUrls: ['./app.scss']
    })
    export class App implements AfterViewInit {
    scrollAmount;
    
    constructor(
      private fb: FormBuilder,
      private element: ElementRef 
    ) {}
    
    ngAfterViewInit(){
      this.scrollAmount = this.element.nativeElement.querySelector('.elem-list');
      this.scrollAmount.addEventListener('wheel', e => { //you can put () instead of e
      // but e is usefull if you require the deltaY amount.
        if(this.scrollAmount.scrollHeight > this.scrollAmount.offsetHeight){
           // there is a scroll bar, do something!
        }else{
           // there is NO scroll bar, do something!
        }
      });
    }
    }
    

    html로의 높이와 숨겨진되지 않은 오버 플로우 값을 가지도록 CSS 또는 SCS들에 양식에 일치한다 "ELEM 목록"클래스 사업부있을 것입니다. (자동 또는 sroll 정도)

    나는 나의 최종 목표는 그들이 수평 구성 요소의 전체 집합을 스크롤 여부 말했다 구성 요소가없는 수직 스크롤을 사용할 수 있고, 그렇지 않으면 단지 하나의 내장을 이동하면 결정 "자동 초점 스크롤"을 가지고 있었기 때문에 스크롤 이벤트에 따라이 평가를 트리거 수직 구성 요소.

    하지만 당신은 다른 곳에서 평가를 배치 할 수가 뭔가에 의해 트리거 될 가지고.

    여기서 기억해야 할 중요한 것은, 당신이 jQuery를 사용하여 다시 강제 항상 액세스하는 방법을 사용하지 않고는이 같은 기능이 없다 않을 것입니다.


  12. 12.솔루션은 대부분의 경우에 의지 작업 위에 제공하지만, scrollHeight을 확인하고 오버 플로우 때로는 충분하지 않다 여기에서 볼 수 있듯이 요소를 몸 실패 및 HTML 수 있습니다 : https://codepen.io/anon/pen/EvzXZw

    솔루션은 대부분의 경우에 의지 작업 위에 제공하지만, scrollHeight을 확인하고 오버 플로우 때로는 충분하지 않다 여기에서 볼 수 있듯이 요소를 몸 실패 및 HTML 수 있습니다 : https://codepen.io/anon/pen/EvzXZw

    function isScrollableY (element) {
      return !!(element.scrollTop || (++element.scrollTop && element.scrollTop--));
    }
    

    참고 : 오버 플로우와 요소 : 필요한 경우도 그에 대한 조건을 추가 할 수 있도록 또한, 스크롤 (추가 정보)으로 처리됩니다 숨겨진 :

    function isScrollableY (element) {
        let style = window.getComputedStyle(element);
        return !!(element.scrollTop || (++element.scrollTop && element.scrollTop--)) 
               && style["overflow"] !== "hidden" && style["overflow-y"] !== "hidden";
    }
    

    요소가 스크롤 동작을 경우 내가 아는 한이 방법은 실패 부드럽게.

    설명 : 트릭은, 아래로 스크롤이 브라우저에 의해 렌더링되지 않습니다 복귀의 시도가. 최상위 함수는 다음과 같이 쓸 수있다 :

    isScrollableY 기능 (요소) { // scrollTop 아닌 경우 0 / 0보다 크고, 그 다음 요소는 스크롤 따라서 있어야 스크롤 // -> 사실 경우 (element.scrollTop === 0) { // 요소가 0 인 경우가 스크롤 될 수있다 // -> 1 개 픽셀에 대해 스크롤 시도 element.scrollTop ++; // 요소는 성공하지 못했습니다 스크롤 0이고 따라서는 스크롤이 아닌 경우 // -> 거짓 (element.scrollTop === 0) 반환 false의 경우; // 다른 요소는 스크롤입니다; scrollTop 속성을 다시 // -> 사실 element.scrollTop--; } true를 반환; }

    function isScrollableY (element) {
      const style = window.getComputedStyle(element);
      
      if (element.scrollHeight > element.clientHeight &&
          style["overflow"] !== "hidden" && style["overflow-y"] !== "hidden" &&
          style["overflow"] !== "clip" && style["overflow-y"] !== "clip"
      ) {
        if (element === document.scrollingElement) return true;
        else if (style["overflow"] !== "visible" && style["overflow-y"] !== "visible") {
          // special check for body element (https://drafts.csswg.org/cssom-view/#potentially-scrollable)
          if (element === document.body) {
            const parentStyle = window.getComputedStyle(element.parentElement);
            if (parentStyle["overflow"] !== "visible" && parentStyle["overflow-y"] !== "visible" &&
                parentStyle["overflow"] !== "clip" && parentStyle["overflow-y"] !== "clip"
            ) {
              return true;
            }
          }
          else return true;
        }
      }
      
      return false;
    }
    

  13. 13.여기에 적절하게 오버 플로우 로직을 설명하는 것 에반의 대답의 개선 된 버전입니다.

    여기에 적절하게 오버 플로우 로직을 설명하는 것 에반의 대답의 개선 된 버전입니다.

                function element_scrollbars(node) {
                    var element = $(node);
                    var overflow_x = element.css("overflow-x");
                    var overflow_y = element.css("overflow-y");
                    var overflow = element.css("overflow");
                    if (overflow_x == "undefined") overflow_x == "";
                    if (overflow_y == "undefined") overflow_y == "";
                    if (overflow == "undefined") overflow == "";
                    if (overflow_x == "") overflow_x = overflow;
                    if (overflow_y == "") overflow_y = overflow;
                    var scrollbar_vertical = (
                        (overflow_y == "scroll")
                        || (
                            (
                                (overflow_y == "hidden")
                                || (overflow_y == "visible")
                            )
                            && (
                                (node.scrollHeight > node.clientHeight)
                            )
                        )
                    );
                    var scrollbar_horizontal = (
                        (overflow_x == "scroll")
                        || (
                            (
                                (overflow_x == "hidden")
                                || (overflow_x == "visible")
                            )
                            && (
                                (node.scrollWidth > node.clientWidth)
                            )
                        )
                    );
                    return {
                        vertical: scrollbar_vertical,
                        horizontal: scrollbar_horizontal
                    };
                }
    

  14. 14.에서는 parseInt 추가 : 여기 내 개선이다. 어떤 이상한 이유로는 그것없이 작동하지 않았다.

    에서는 parseInt 추가 : 여기 내 개선이다. 어떤 이상한 이유로는 그것없이 작동하지 않았다.

    // usage: jQuery('#my_div1').hasVerticalScrollBar();
    // Credit: http://stackoverflow.com/questions/4814398/how-can-i-check-if-a-scrollbar-is-visible
    (function($) {
        $.fn.hasVerticalScrollBar = function() {
            return this.get(0) ? parseInt( this.get(0).scrollHeight ) > parseInt( this.innerHeight() ) : false;
        };
    })(jQuery);
    

  15. 15.적어도 새로운 버전, 크롬, 에지, 파이어 폭스와 오페라에서 작동합니다.

    적어도 새로운 버전, 크롬, 에지, 파이어 폭스와 오페라에서 작동합니다.

    jQuery를 사용하여 ...

    설정이 기능은 바닥 글을 수정합니다 :

    function fixFooterCaller()
    {
        const body = $('body');
        const footer = $('body footer');
    
        return function ()
        {
            // If the scroll bar is visible
            if ($(document).height() > $(window).height())
            {
                // Reset
                footer.css('position', 'inherit');
                // Erase the padding added in the above code
                body.css('padding-bottom', '0');
            }
            // If the scrollbar is NOT visible
            else
            {
                // Make it fixed at the bottom
                footer.css('position', 'fixed');
                // And put a padding to the body as the size of the footer
                // This makes the footer do not cover the content and when
                // it does, this event fix it
                body.css('padding-bottom', footer.outerHeight());
            }
        }
    }
    

    이 함수를 반환합니다. 단 한 번 몸과 바닥 글을 설정하려면이 방법을 만들었다.

    문서가 준비되면 그 다음이 설정합니다.

    $(document).ready(function ()
    {
        const fixFooter = fixFooterCaller();
    
        // Put in a timeout call instead of just call the fixFooter function
        // to prevent the page elements needed don't be ready at this time
        setTimeout(fixFooter, 0);
        // The function must be called every time the window is resized
        $(window).resize(fixFooter);
    });
    

    바닥 글 CSS를이 추가 :

    footer {
        bottom: 0;
    }
    

  16. 16.제시된 답변의 대부분은 아니지만 꽤 거기에 가까이 내가 할 필요가 곳으로 저를 얻었다.

    제시된 답변의 대부분은 아니지만 꽤 거기에 가까이 내가 할 필요가 곳으로 저를 얻었다.

    우리는 기본적으로 스크롤 막대가 본문 요소의 크기가보기 포트보다 크기가 큰 것을 의미하는 정의에 의해, 정상적인 상황에서 볼 수 -would- 경우 평가 싶었다. 이것은 내가 그것을 제출하고 이유입니다, 제시된 해결책이 아니었다.

    희망은 누군가가 도움이!

    (function($) {
        $.fn.hasScrollBar = function() {
            return this.get(0).scrollHeight > $(window).height();
        }
    })(jQuery);
    

    기본적으로, 우리는 hasScrollbar 기능을 가지고 있지만, 요청 된 요소가 뷰포트보다 큰 경우 반환. 보기 포트 크기를 위해, 우리는 단지 $ (창) .height의 ()을 사용했다. 요소의 크기에 대해 그의 비교 빠른는 올바른 결과와 바람직한 행동을 얻을 수 있습니다.


  17. 17.수직 스크롤 또는 본문이 현재 요소의 부모를 찾아보십시오.

    수직 스크롤 또는 본문이 현재 요소의 부모를 찾아보십시오.

    $.fn.scrollableParent = function() {
        var $parents = this.parents();
    
        var $scrollable = $parents.filter(function(idx) {
            return this.scrollHeight > this.offsetHeight && this.offsetWidth !== this.clientWidth;
        }).first();
    
        if ($scrollable.length === 0) {
            $scrollable = $('html, body');
        }
        return $scrollable;
    };
    

    이를 통해 현재 요소 자동 스크롤하는데 사용될 수있다 :

    var $scrollable = $elem.scrollableParent();
    $scrollable.scrollTop($elem.position().top);
    

  18. 18.없음 프레임 워크는 자바 스크립트 접근, 수직 및 수평을 검사

    없음 프레임 워크는 자바 스크립트 접근, 수직 및 수평을 검사

     /*
     * hasScrollBars
     * 
     * Checks to see if an element has scrollbars
     * 
     * @returns {object}
     */
    Element.prototype.hasScrollBars = function() {
        return {"vertical": this.scrollHeight > this.style.height, "horizontal": this.scrollWidth > this.style.width};
    }
    

    이처럼 사용

    if(document.getElementsByTagName("body")[0].hasScrollBars().vertical){
                alert("vertical");
    }
    
            if(document.getElementsByTagName("body")[0].hasScrollBars().horizontal){
                alert("horizontal");
    }
    

  19. 19.고려해야 할 두 가지 영역의 크기, 윈도우와 HTML이있다. 표시되는 HTML 폭 경우, 예를 들면, 창 폭보다 큰 후 스크롤 바는 사용자 인터페이스에 존재할 수있다. 그래서 윈도우 비율과 HTML의 비율을 읽고 기본적인 수학을하고의 문제입니다.

    고려해야 할 두 가지 영역의 크기, 윈도우와 HTML이있다. 표시되는 HTML 폭 경우, 예를 들면, 창 폭보다 큰 후 스크롤 바는 사용자 인터페이스에 존재할 수있다. 그래서 윈도우 비율과 HTML의 비율을 읽고 기본적인 수학을하고의 문제입니다.

    화살표 표시와 같은 간단한 classlist 토글로 끝낼 페이지, 예를 들어 위에 겹쳐 .hidden {디스플레이 : 없음}

    다음은이 비율을 취득하기위한 crossbrowser 방법입니다. (신용 W3 학교)

  20. from https://stackoverflow.com/questions/4814398/how-can-i-check-if-a-scrollbar-is-visible by cc-by-sa and MIT license