在网页上检查滚动条是否可见通常有几种方法，常见的是使用JavaScript或者通过CSS样式来判断。以下是几种检查滚动条是否可见的方法：

使用JavaScript

方法1: 比较元素的高度

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

// 使用方法
let element = document.getElementById('myElement'); // 需要检查的元素
let scrollbarVisible = isScrollbarVisible(element);
console.log('滚动条是否可见:', scrollbarVisible);

方法2: 计算元素的宽度差

javascript
function isHorizontalScrollbarVisible(element) {
  return element.scrollWidth > element.clientWidth;
}

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

// 使用方法
let element = document.getElementById('myElement'); // 需要检查的元素
let horizontalScrollbarVisible = isHorizontalScrollbarVisible(element);
let verticalScrollbarVisible = isVerticalScrollbarVisible(element);
console.log('水平滚动条是否可见:', horizontalScrollbarVisible);
console.log('垂直滚动条是否可见:', verticalScrollbarVisible);

使用CSS

通过CSS，您可以更改元素的 overflow 属性来控制滚动条的可见性。这不是一个检测滚动条是否已经可见的方法，而是确保在需要时显示或隐藏滚动条的方法。

css
/* 总是显示垂直滚动条 */
.element-always-show-vertical-scrollbar {
  overflow-y: scroll;
}

/* 当需要时显示垂直滚动条 */
.element-auto-vertical-scrollbar {
  overflow-y: auto;
}

/* 隐藏垂直滚动条 */
.element-hide-vertical-scrollbar {
  overflow-y: hidden;
}

/* 对于水平滚动条，替换 'y' 为 'x' */

请注意，以上方法检测的是元素级别的滚动条是否可见。如果需要检测整个页面的滚动条，可以将 element 替换为 document.body 或者 document.documentElement。

一个小插件。

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

像这样使用它，

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

已测试可在 Firefox、Chrome、IE6、7、8 上运行

body但在标签选择器上无法正常工作

演示

---

编辑

我发现当水平滚动条导致垂直滚动条出现时，此功能不起作用......

我找到了另一个解决方案...使用clientHeight

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

Element.scrollHeight您可以使用和属性的组合来完成此操作Element.clientHeight。

根据MDN：

Element.scrollHeight只读属性是元素内容高度的度量，包括由于溢出而在屏幕上不可见的内容**。****scrollHeight 值等于元素所需的最小 clientHeight，以便在不使用垂直滚动条的情况下适应视点中的所有内容。**它包括元素内边距，但不包括其边距。

和：

Element.clientHeight只读属性返回元素的内部高度（以像素为单位），包括填充，但不包括水平滚动条高度、边框或边距**。**

clientHeight 可以计算为 CSS 高度 + CSS 填充 - 水平滚动条的高度（如果存在）。

因此，如果滚动高度大于客户端高度，该元素将显示滚动条，因此您的问题的答案是：

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

也许是一个更简单的解决方案。

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

我应该对雷格尔所说的做一些修改：

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

insideHeight 计算控件的高度及其顶部和底部填充

这扩展了@Reigel 的答案。它将返回水平或垂直滚动​​条的答案。

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

例子：

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