是否有可能检查溢出:自动的一个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'):
}
}
});
有时内容很短(没有滚动条)，有时内容很长(滚动条可见)。
当前回答
另一个简单的答案是:
export const isScrollbarPresent = (element?: HTMLElement) => {
const testedElement = element ?? document.body;
return testedElement.scrollHeight > testedElement.clientHeight; }
我检查元素的scrollHeight是否大于clientHeight。scrollHeight返回一个元素的绝对高度，包括所有不可见的元素。clientHeight返回屏幕上可见的高度。
其他回答
另一个简单的答案是:
export const isScrollbarPresent = (element?: HTMLElement) => {
const testedElement = element ?? document.body;
return testedElement.scrollHeight > testedElement.clientHeight; }
我检查元素的scrollHeight是否大于clientHeight。scrollHeight返回一个元素的绝对高度，包括所有不可见的元素。clientHeight返回屏幕上可见的高度。
找到具有垂直滚动或主体的当前元素的父元素。
$.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);
我有一个问题，我需要检查，如果滚动条是可见的整个屏幕(主体)或不。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;
};
我得到主体的宽度，有或没有滚动条，并保存主体的当前溢出状态。然后隐藏滚动条。如果有滚动条，主体的宽度现在会更大。如果不是，宽度是相同的。之后，我恢复溢出状态。
这里是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上都可以使用。
使用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;
}
