是否有可能检查溢出:自动的一个div?

例如:

HTML

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

JQUERY

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

});

有时内容很短(没有滚动条),有时内容很长(滚动条可见)。


当前回答

至少在新版本的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;
}

其他回答

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

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

我为jQuery做了一个新的自定义:pseudo选择器来测试一个项目是否具有以下css属性之一:

溢出(滚动|汽车): overflow-x(滚动|汽车): overflow-y(滚动|汽车):

我想找到另一个元素的最近的可滚动父元素,所以我还写了另一个小jQuery插件来找到最近的溢出父元素。

这种解决方案可能不是最好的,但它似乎确实有效。我将它与$。scrollTo插件。有时我需要知道一个元素是否在另一个可滚动容器中。在这种情况下,我想滚动父滚动元素与窗口。

我可能应该把它包装在一个单独的插件中,并添加psuedo选择器作为插件的一部分,以及公开一个“最近”方法来查找最近的(父)可滚动容器。

Anywho……在这儿。

美元。isScrollable 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();
};

jQuery插件$.scrollableparent()

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

    }

});

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

你需要element。scrollheight。将其与$(element).height()进行比较。

我有一个问题,我需要检查,如果滚动条是可见的整个屏幕(主体)或不。Chrome有能力隐藏滚动条,尽管有一个溢出发生的事实,因此主体是可滚动的。

因此,上面的解决方案对我不起作用。我现在检查,如果有滚动条如下方式:

const isScrollbarPresent = () => {
    const beforeScrollbarHidden = document.body.clientWidth;
    const overflowState = document.body?.style.overflow;
    document.body.style.overflow = 'hidden';
    const afterScrollbarHidden = document.body.clientWidth;
    document.body.style.overflow = overflowState;
    return beforeScrollbarHidden !== afterScrollbarHidden;
};

我得到主体的宽度,有或没有滚动条,并保存主体的当前溢出状态。然后隐藏滚动条。如果有滚动条,主体的宽度现在会更大。如果不是,宽度是相同的。之后,我恢复溢出状态。