overflow:auto사업부의 확인이 가능 합니까?

예를 들면 다음과 같습니다.

HTML

<div id="my_div" style="width: 100px; height:100px; overflow:auto;" class="my_class"> 
  * content
</div>

쿼리

$('.my_class').live('hover', function (event)
{
    if (event.type == 'mouseenter')
    {
         if( ...  if scrollbar visible ? ... )
         {
            alert('true'):
         }
         else
         {
            alert('false'):
         }
    }

});

때때로 내용이 짧거나 (스크롤바 없음) 때로는 길다 (스크롤바가 표시됨).

작은 플러그인.

(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..

Firefox, Chrome, IE6,7,8에서 작동 테스트

그러나 제대로 작동하지 않습니다 body태그 선택기

데모

편집하다

세로 스크롤 막대가 나타나는 가로 스크롤 막대가 있으면이 기능이 작동하지 않는다는 것을 알았습니다.

다른 해결책을 찾았습니다 ... 사용 clientHeight

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

아마도 더 간단한 해결책 일 것입니다.

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

Element.scrollHeight및 Element.clientHeight속성을 조합하여이 작업을 수행 할 수 있습니다 .

MDN에 따르면 :

Element.scrollHeight는 읽기 전용 특성 때문에 오버플 화면에 보이지 않는 내용을 포함하는 요소의 내용의 높이를 측정한다. scrollHeight 값은 세로 스크롤 막대를 사용하지 않고 뷰의 모든 내용을 맞추기 위해 요소에 필요한 최소 clientHeight와 같습니다. 요소 패딩은 포함하지만 여백은 포함하지 않습니다.

과:

Element.clientHeight 읽기 전용 속성을 반환에게 요소의 내부 높이를 패딩 아니라 수평 스크롤 바의 높이, 테두리, 또는 여백을 포함하여 픽셀에.

clientHeight는 CSS 높이 + CSS 패딩-가로 스크롤 막대의 높이 (있는 경우)로 계산할 수 있습니다.

따라서 스크롤 높이가 클라이언트 높이보다 큰 경우 요소에 스크롤 막대가 표시되므로 질문에 대한 답변은 다음과 같습니다.

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

나는 Reigel의 말을 약간 바꿔야합니다.

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

innerHeight는 컨트롤의 높이와 상단 및 하단 패딩을 계산합니다.

이것은 @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

element.scrollHeight 가 필요합니다 . 와 비교하십시오 $(element).height().

항목에 다음 CSS 속성 중 하나가 있는지 여부를 테스트하기 위해 jQuery 용 새 사용자 정의 : pseudo 선택기를 만들었습니다.

1. 오버플로 : [scroll | auto]
2. overflow-x : [스크롤 | 자동]
3. 오버플로 -y : [scroll | auto]

다른 요소의 가장 가까운 스크롤 가능한 부모를 찾고 싶었으므로 오버플로가있는 가장 가까운 부모를 찾기 위해 또 다른 작은 jQuery 플러그인을 작성했습니다.

이 솔루션은 아마도 최고의 성능을 발휘하지 못하지만 작동하는 것처럼 보입니다. $ .scrollTo 플러그인과 함께 사용했습니다. 때로는 요소가 다른 스크롤 가능한 컨테이너 안에 있는지 여부를 알아야합니다. 이 경우 부모 스크롤 가능 요소와 창을 스크롤하고 싶습니다.

아마도 이것을 단일 플러그인으로 감싸서 psuedo 선택기를 플러그인의 일부로 추가하고 가장 가까운 (부모) 스크롤 가능한 컨테이너를 찾기 위해 '가장 가까운'방법을 노출해야했습니다.

누구든지 .... 여기 있습니다.

스크롤 가능한 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'
    );
};

$ ( ': scrollable') 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();

업데이트 : Robert Koritnik은 이미 $ .scrollintoview () jQuery 플러그인의 일부로 스크롤 가능한 컨테이너의 스크롤 가능한 축과 높이를 식별하는 훨씬 더 강력한 스크롤 가능한 의사 선택기를 찾았습니다. 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();

    }

});

위의 첫 번째 솔루션은 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");
}​

• 준비된 문서 포장
• monitorWidth1 : 오버플로가 자동으로 설정된 div
• mtc : monitorWidth1 내의 컨테이너 div
• AdjustOverflowWidth : 스크롤바가 활성화 될 때 #mtc div에 적용된 CSS 클래스 * 경보를 사용하여 크로스 브라우저를 테스트 한 다음 최종 프로덕션 코드에 주석을 답니다.

HTH

(scrollWidth / Height-clientWidth / Height)는 스크롤 막대가 있음을 나타내는 좋은 지표이지만 많은 경우 "거짓 긍정적"답변을 제공합니다. 정확 해야하는 경우 다음 기능을 사용하는 것이 좋습니다. 요소가 스크롤 가능한지 추측하는 대신 스크롤 할 수 있습니다 ...

function isScrollable( el ){
  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;
  return {
    horizontallyScrollable: x1 !== x2 || x2 !== x3,
    verticallyScrollable: y1 !== y2 || y2 !== y3
  }
}
function check( id ){
  alert( JSON.stringify( isScrollable( document.getElementById( id ))));
}

#outer1, #outer2, #outer3 {
  background-color: pink;
  overflow: auto;
  float: left;
}
#inner {
  width:  150px;
  height: 150px;
}
button {  margin: 2em 0 0 1em; }

<div id="outer1" style="width: 100px; height: 100px;">
  <div id="inner">
    <button onclick="check('outer1')">check if<br>scrollable</button>
  </div>
</div>
<div id="outer2" style="width: 200px; height: 100px;">
  <div id="inner">
    <button onclick="check('outer2')">check if<br>scrollable</button>
  </div>
</div>
<div id="outer3" style="width: 100px; height: 180px;">
  <div id="inner">
    <button onclick="check('outer3')">check if<br>scrollable</button>
  </div>
</div>

여기에있는 모든 사람의 답변이 불완전하며 이미 답변에 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"
}

나처럼 JQuery가 아닌 현대적인 js 프레임 워크 중 하나를 사용 하고이 스레드의 사람들에 의해 완전히 포기 된 가난한 영혼을 위해 이것을 더 확장 할 것입니다 .

이것은 Angular 6으로 작성되었지만 React 16, Vue 2, Polymer, Ionic, React-Native를 작성하면 어떻게 적응해야하는지 알 수 있습니다. 그리고 그것은 전체 구성 요소이므로 쉬워야합니다.

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 목록"클래스 사업부있을 것 height하고 overflow없는 값 hidden. (그래서 auto나sroll )

내 최종 목표는 "자동 초점 스크롤"을 사용하여 구성 요소에 세로 스크롤이 없으면 구성 요소 전체를 가로로 스크롤할지 여부를 결정하고 그렇지 않으면 수직으로 구성 요소.

그러나 eval을 다른 곳에 배치하여 다른 것에 의해 트리거되도록 할 수 있습니다.

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

오버플로 논리를 올바르게 설명하는 것으로 보이는 Evan의 향상된 답변 버전이 있습니다.

            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
                };
            }

위에 제공된 솔루션은 대부분의 경우 작동하지만 scrollHeight 및 오버플로를 확인하는 것만으로는 충분하지 않으며 여기에 표시된대로 body 및 html 요소에 실패 할 수 있습니다. https://codepen.io/anon/pen/EvzXZw

1. 솔루션-요소가 스크롤 가능한지 확인하십시오.

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

참고 :가있는 요소 overflow: hidden는 스크롤 가능 ( more info ) 으로 취급 되므로 필요한 경우 이에 대한 조건을 추가 할 수도 있습니다.

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

내가 아는 한이 방법은 요소에 scroll-behavior: smooth .

설명 : 아래로 스크롤하여 되돌리려는 시도는 브라우저에서 렌더링되지 않습니다. 최상위 함수는 다음과 같이 작성할 수도 있습니다.

function isScrollableY (element) {
  // if scrollTop is not 0 / larger than 0, then the element is scrolled and therefore must be scrollable
  // -> true  
  if (element.scrollTop === 0) {
    // if the element is zero it may be scrollable  
    // -> try scrolling about 1 pixel
    element.scrollTop++;
    // if the element is zero then scrolling did not succeed and therefore it is not scrollable 
    // -> false  
    if (element.scrollTop === 0) return false;
    // else the element is scrollable; reset the scrollTop property
    // -> true
    element.scrollTop--;
  }
  return true;
}

2. 해결책-필요한 모든 점검을 수행하십시오.

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.documentElement) 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;
}

내 개선 사항은 다음과 같습니다. 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);

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

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;
}

제시된 답변의 대부분은 내가 있어야 할 곳에 가까웠지만 거기에는 없었습니다.

우리는 기본적으로 스크롤 바가 정상적인 상황에서 보일지 여부를 평가하고 싶었습니다. 그 정의에 따라 body 요소의 크기가 뷰 포트보다 큽니다. 이것은 제시된 솔루션이 아니기 때문에 제출하는 이유입니다.

잘만되면 그것은 누군가를 돕는다!

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

기본적으로 hasScrollbar함수가 있지만 요청 된 요소가 뷰 포트보다 큰 경우 반환합니다. 뷰 포트 크기를 위해 방금 사용했습니다 $(window).height(). 요소 크기와 빠른 비교를 통해 올바른 결과와 바람직한 동작을 얻을 수 있습니다.

세로 스크롤 또는 본문이있는 현재 요소의 부모를 찾으십시오.

$.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);

프레임 워크 없음 자바 스크립트 접근 방식, 세로 및 가로 모두 확인

 /*
 * 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");
}