jQuery check if horizontal scroll is present

Functions that use jQuery to detect whether there is a horizontal scroll bar in an element hasHScrollBar() (and vertical scroll bar detection function).

jQuery hasHScrollBar() Function

// 用于检查元素是否存在滚动条的实用程序函数
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');

Similar function:

// 用于检查元素是否存在水平滚动条的实用程序函数
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();

Another version:

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'));

Frequently Asked Questions about jQuery and Horizontal Scroll Bars (FAQ)

How to use jQuery to check if there is a horizontal scroll bar?

Use jQuery to check if there is a horizontal scroll bar, you can use the scrollWidth property. This property returns the total width of the element in pixels, including fills, borders, and scroll bars. If scrollWidth is greater than clientWidth, a horizontal scroll bar exists. Here is a simple code snippet:

if (document.documentElement.scrollWidth > document.documentElement.clientWidth) {
  // 存在水平滚动条
}

What is the difference between

scrollWidth and clientWidth?

scrollWidth Properties return the total width of the element in pixels, including padding, borders, and scroll bars. On the other hand, clientWidth returns the visible width of an element in pixels, including padding, but not borders, scroll bars, or margins.

Can I use jQuery to check if there is a vertical scrollbar?

Yes, you can use a similar method to check the vertical scrollbar. You need to compare scrollHeight and clientHeight instead of scrollWidth and clientWidth.

How to use jQuery to hide horizontal scrollbars?

You can hide the horizontal scroll bar by setting the css() property to overflow using the 'hidden' method in jQuery. Here is a simple code snippet:

$("body").css("overflow-x", "hidden");

How to force display horizontal scroll bars?

You can force the horizontal scroll bar to display by setting the css() attribute to overflow using the 'scroll' method in jQuery. Here is a simple code snippet:

$("body").css("overflow-x", "scroll");

The rest of the FAQ is similar to the above, simply replacing the horizontal scroll bar with a vertical scroll bar, or operating on a specific element. To avoid duplication, I will not repeat it here. All problems can be solved by using the scrollWidth/scrollHeight and clientWidth/clientHeight properties and the css() method of jQuery.

The above is the detailed content of jQuery check if horizontal scroll is present. For more information, please follow other related articles on the PHP Chinese website!