这里是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
                };
            }

这扩展了@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

找到具有垂直滚动或主体的当前元素的父元素。

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

有两种区域大小需要考虑，窗口和html。例如，如果html宽度大于窗口宽度，那么用户界面上可能会出现滚动条。所以这是一个阅读窗口比例和html比例的问题，并做基本的数学。

至于显示一个箭头覆盖在页面上，这是通过一个简单的类列表切换来完成的，例如。hidden{display:none}

这里有一个跨浏览器的方法来获得这些比例。(W3学分学校)

| | document.body.clientWidth; Var h =窗口。innerHeight || document.documentElement.clientHeight || document.body.clientHeight;所有的颜色

至少在新版本的Chrome、Edge、Firefox和Opera上都可以使用。

使用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()。将其与元素大小进行快速比较，可以产生正确的结果和理想的行为。