如何检查滚动条是否可见？
是否有可能检查overflow:auto分区？
例如：
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'): } } });
有时是内容短（没有滚动条），有时长（滚动条可见）。
它的一个小插件。
(function($) { $.fn.hasScrollBar = function() { return this.get(0).scrollHeight > this.height(); } })(jQuery);
像这样使用它，
$('#my_div1').hasScrollBar(); // returns true if there's a `vertical` scrollbar, false otherwise..
testing工作在Firefox，Chrome，IE6,7,8
但在body标签select器上无法正常工作
演示
编辑
我发现，当你有水平滚动条，导致垂直滚动条出现，这个function不起作用….
我发现了另一个解决scheme…使用clientHeight
return this.get(0).scrollHeight > this.get(0).clientHeight;
也许更简单的解决scheme。
if ($(document).height() > $(window).height()) { // scrollbar }
我应该改变Reigel所说的一点点：
(function($) { $.fn.hasScrollBar = function() { return this.get(0) ? this.get(0).scrollHeight > this.innerHeight() : false; } })(jQuery);
innerHeight计算控件的高度和顶部和底部的填充
这扩大了@ 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
您可以使用Element.scrollHeight和Element.clientHeight属性的组合来完成此操作。
根据MDN：
Element.scrollHeight只读属性是元素内容高度的度量，包括由于溢出而在屏幕上不可见的内容。 scrollHeight值等于元素所需的最小clientHeight，以便在不使用垂直滚动条的情况下适合视点中的所有内容。 它包含元素填充但不包含其边距。
和：
Element.clientHeight只读属性以像素为单位返回元素的内部高度，包括填充，但不包括水平滚动条高度，边框或边距。
clientHeight可以计算为CSS高度+ CSS填充 – 水平滚动条的高度（如果存在）。
因此，如果滚动高度大于客户端高度，该元素将显示一个滚动条，所以您的问题的答案是：
function scrollbarVisible(element) { return element.scrollHeight > element.clientHeight; }
你需要element.scrollHeight 。 将它与$(element).height() 。
上面的第一个解决scheme只适用于IE上面的第二个解决scheme只在FF中工作
这两种function的组合在两种浏览器中都可以使用：
//Firefox Only!! if ($(document).height() > $(window).height()) { // has scrollbar $("#mtc").addClass("AdjustOverflowWidth"); alert('scrollbar present - Firefox'); } else { $("#mtc").removeClass("AdjustOverflowWidth"); } //Internet Explorer Only!! (function($) { $.fn.hasScrollBar = function() { return this.get(0).scrollHeight > this.innerHeight(); } })(jQuery); if ($('#monitorWidth1').hasScrollBar()) { // has scrollbar $("#mtc").addClass("AdjustOverflowWidth"); alert('scrollbar present - Internet Exploder'); } else { $("#mtc").removeClass("AdjustOverflowWidth"); }
- 准备好文件
- monitorWidth1：溢出设置为自动的div
- mtc：monitorWidth1中的一个容器div
- AdjustOverflowWidth：滚动条处于活动状态时应用于#mtc div的css类*使用警报testing跨浏览器，然后注释最终生产代码。
HTH
我做了一个新的自定义：jQuery的伪select器来testing一个项目是否具有以下CSS属性之一：
- 溢出：[scroll | auto]
- overflow-x：[scroll | auto]
- 溢出-y：[scroll | auto]
我想find另一个元素的最接近的可滚动父级，所以我也写了另一个小的jQuery插件来find最接近的溢出父。
这个解决scheme可能不是最好的，但它似乎工作。 我将它与$ .scrollTo插件一起使用。 有时我需要知道一个元素是否在另一个可滚动的容器内。 在这种情况下，我想滚动父滚动元素与窗口。
我可能应该已经把它包装在一个插件中，并添加了psuedoselect器作为插件的一部分，并且暴露了一个“最接近”的方法来find最近的（父）可滚动容器。
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伪select器：
$.expr[":"].scrollable = function(a) { var elem = $(a); return elem.isScrollable(); };
$ .scrollableparent（）jQuery插件：
$.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已经想出了一个非常强大的可滚动伪select器，它将识别可滚动容器的可滚动轴和高度，作为他的$ .scrollintoview（）jQuery插件的一部分。 scrollintoview插件
这是他的花式伪select器（道具）：
$.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）是滚动条存在的一个很好的指标，但是它会在很多场合给你一个“误报”的答案。 如果你需要准确，我会build议使用以下function。 而不是试图猜测元素是否可滚动 – 您可以滚动它…
function check(){ alert (isScrollable(document.getElementById('outer'))); } 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.scrollTop+=1; var x2 = el.scrollLeft; el.scrollTop-=1; var x3 = el.scrollLeft; el.scrollLeft = x1; return !(y1 === y2 && y2 === y3 && x1 === x2 && x2 === x3); }
#outer{ width:100px; height:100px; background-color:pink; overflow:auto; } #inner{ width:150px; height:150px; }
<div id="outer"> <div id="inner"> </div> </div> <button onclick="check()">check if scrollable</button>
这是我的改进：添加parseInt。 出于某种奇怪的原因，如果没有它，它就无法工作。
// usage: jQuery('#my_div1').hasVerticalScrollBar(); // Credit: http://stackoverflow.com/questions/4814398/how-can-i-check-if-a-scrollbar-is-visible (function($) { $.fn.hasVerticalScrollBar = function() { return this.get(0) ? parseInt( this.get(0).scrollHeight ) > parseInt( this.innerHeight() ) : false; }; })(jQuery);
呃大家在这里的答案是不完整的，让我们停止使用jQuery的答案已经请你。 检查jQuery的文档，如果你想在jQuery的信息。
下面是一个通用的纯JavaScript函数，用于testing元素是否具有完整的滚动条：
// dimension - Either 'y' or 'x' // computedStyles - (Optional) Pass in the domNodes computed styles if you already have it (since I hear its somewhat expensive) function hasScrollBars(domNode, dimension, computedStyles) { dimension = dimension.toUpperCase() if(dimension === 'Y') { var length = 'Height' } else { var length = 'Width' } var scrollLength = 'scroll'+length var clientLength = 'client'+length var overflowDimension = 'overflow'+dimension var hasVScroll = domNode[scrollLength] > domNode[clientLength] // Check the overflow and overflowY properties for "auto" and "visible" values var cStyle = computedStyles || getComputedStyle(domNode) return hasVScroll && (cStyle[overflowDimension] == "visible" || cStyle[overflowDimension] == "auto" ) || cStyle[overflowDimension] == "scroll" }
这里是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 }; }
适用于Chrome ， Edge ， Firefox和Opera ，至less在更新的版本中。
使用JQuery …
设置此function来修复页脚：
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; }
上面提供的解决scheme在绝大多数情况下都能正常工作，但是检查scrollHeight和溢出有时是不够的，并且body和html元素失败： https ：//codepen.io/anon/pen/EvzXZw
这个解决scheme检查元素是否可滚动：
function isScrollableY (element) { return !!(element.scrollTop || (++element.scrollTop && element.scrollTop--)); }
注意： overflow = hidden的元素也被视为可滚动的（ 更多信息 ），所以如果需要的话，你也可以添加一个条件：
function hasVerticalScrollbar (element) { let style = window.getComputedStyle(element); return !!(element.scrollTop || (++element.scrollTop && element.scrollTop--)) && style["overflow"] !== "hidden" && style["overflow-y"] !== "hidden"; }
说明：诀窍是，向下滚动和还原它的尝试不会被浏览器呈现。 最上面的函数也可以写成如下forms：
function isScrollableY (element) { // if scrollTop is not 0 / larger than 0, then the element is scrolled and therefore must be scrollable // -> true if (element.scrollTop === 0) { // if the element is zero it may be scrollable // -> try scrolling about 1 pixel element.scrollTop++; // if the element is zero then scrolling did not succeed and therefore it is not scrollable // -> false if (element.scrollTop === 0) return false; // else the element is scrollable; reset the scrollTop property // -> true element.scrollTop--; } return true; }
