>웹 프론트엔드 >JS 튜토리얼 >jQuery 수평 스크롤이 있는지 확인하십시오

jQuery 수평 스크롤이 있는지 확인하십시오

William Shakespeare
William Shakespeare원래의
2025-02-27 01:16:11450검색

jQuery check if horizontal scroll is present jQuery를 사용하여 요소

(및 수직 스크롤 막대 감지 기능)에 수평 스크롤 막대가 있는지 여부를 감지하는 기능.

hasHScrollBar() jQuery

함수

유사한 함수 : hasHScrollBar() 다른 버전 :

jQuery 및 수평 스크롤 막대 (FAQ)
<code class="language-javascript">// 用于检查元素是否存在滚动条的实用程序函数
jQuery.fn.hasScrollBar = function(direction) {
  if (direction === 'vertical') {
    return this.get(0).scrollHeight > this.innerHeight();
  } else if (direction === 'horizontal') {
    return this.get(0).scrollWidth > this.innerWidth();
  }
  return false;
};

// $('#c3 .mbcontainercontent').hasScrollBar('horizontal');</code>
에 대한 자주 묻는 질문 수평 스크롤 막대가 있는지 확인하기 위해 jQuery를 사용하는 방법은 무엇입니까?

jQuery를 사용하여 수평 스크롤 막대가 있는지 확인하면 속성을 ​​사용할 수 있습니다. 이 속성은 요소의 총 너비를 충전, 경계 및 스크롤 막대를 포함하여 픽셀로 반환합니다.

보다 크면 수평 스크롤 막대가 존재합니다. 간단한 코드 스 니펫은 다음과 같습니다
<code class="language-javascript">// 用于检查元素是否存在水平滚动条的实用程序函数
jQuery.fn.hasHScrollBar = function() {
  return this.get(0).scrollWidth > this.innerWidth();
};
// $('#c3 .mbcontainercontent').hasHScrollBar();

// 用于检查元素是否存在垂直滚动条的实用程序函数
jQuery.fn.hasVScrollBar = function() {
  return this.get(0).scrollHeight > this.innerHeight();
};
// $('#c3 .mbcontainercontent').hasVScrollBar();</code>

의 차이점은 무엇입니까? 속성은 패딩, 테두리 및 스크롤 막대를 포함하여 픽셀로 요소의 총 너비를 반환합니다. 반면에 는 패딩, 경계, 스크롤 막대 또는 여백을 포함한 픽셀로 요소의 가시 너비를 반환합니다.

jQuery를 사용하여 수직 스크롤 바가 있는지 확인할 수 있습니까?
<code class="language-javascript">function hasScroll(el, direction) {
  direction = (direction === 'vertical') ? 'scrollTop' : 'scrollLeft';
  let result = !!el[direction];

  if (!result) {
    el[direction] = 1;
    result = !!el[direction];
    el[direction] = 0;
  }
  return result;
}

// alert('vertical? ' + hasScroll(document.body, 'vertical'));
// alert('horizontal? ' + hasScroll(document.body, 'horizontal'));</code>
예, 비슷한 방법을 사용하여 수직 스크롤 바를 확인할 수 있습니다.

와 대신 와 를 비교해야합니다.

수평 스크롤 바를 숨기기 위해 jQuery를 사용하는 방법은 무엇입니까?

jQuery에서 메소드를 사용하여 속성을 ​​

로 설정하여 수평 스크롤 막대를 숨길 수 있습니다. 간단한 코드 스 니펫은 다음과 같습니다

수평 스크롤 막대를 표시하는 방법은 무엇입니까? scrollWidth jQuery에서 메소드를 사용하여 scrollWidth 속성을 ​​clientWidth로 설정하여 수평 스크롤 막대를 표시 할 수 있습니다. 간단한 코드 스 니펫은 다음과 같습니다

나머지 FAQ는 위와 유사하며 수평 스크롤 막대를 수직 스크롤 막대로 바꾸거나 특정 요소에서 작동합니다. 복제를 피하기 위해 여기서 반복하지 않을 것입니다. 모든 문제는 if (document.documentElement.scrollWidth > document.documentElement.clientWidth) { // 存在水平滚动条 } 및 특성을 사용하고 jQuery의 방법을 사용하여 해결할 수 있습니다. scrollWidth

위 내용은 jQuery 수평 스크롤이 있는지 확인하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.