检测 <div> 何时显示或隐藏滚动条答案

【问题标题】：Detect when a <div> shows or hides a scrollbar检测 <div> 何时显示或隐藏滚动条
【发布时间】：2009-10-06 05:55:35
【问题描述】：

有没有办法检测 div 何时显示或隐藏滚动条？当滚动条显示时，我想调整 div 内的一些控件的大小，这样滚动条就不会覆盖它们。

所以，我需要一个在滚动条出现和消失时触发的事件。谢谢，布赖恩

【问题讨论】：

【解决方案1】：

您可以将内容包装在另一个 DIV 中 - 然后您可以检测内容的高度，如果它高于包含的 DIV，则调整其大小。一个 jQuery 的例子：

if($('#content-wrapper-div').height() > $('#scrolling-div').height())
{
    var oldWidth = $('#content-wrapper-div').width();
    $('#content-wrapper-div').css('width', (oldWidth - 20) + 'px')
}

“20”可以根据滚动条的宽度进行更改（或者您可以使用高度，或调整其中的各个控件的大小）。

【讨论】：

【解决方案2】：

对于 20px 来说似乎需要做很多工作。您可能需要重新考虑您的设计。但我会咬人的。

没有“elementGotBigger”事件，因此要检测到您需要知道哪些用户交互可能导致该事件：

DOM 准备就绪
窗口调整大小
您知道的其他一些事件可能会导致更改（可能是导航片段）

然后让每个事件触发一个检查函数

元素的大小对比
元素的滚动大小。

然后如果滚动大小大于元素的大小，做一些事情。

这是一个使用 mootools 的示例：http://mooshell.net/HC3g9/

【讨论】：

在 Mac OS X 10.6 上的 Safari 4 中无法正常工作。当滚动条出现时它仍然显示“假”，直到它进一步缩小时显示“真”。
@titaniumdecoy：它可以使用一些修剪，但概念就在那里。但是，我仍然认为这是一个设计缺陷。只需给控件视图多 20 个像素即可开始。
我在这个滚动区域中有 Telerik RadPanelItem 控件。如果我缩小它们以腾出空间让滚动条出现，那么它们的右侧会显示一个空白区域。如果我将它们设为全尺寸，那么当滚动条出现时，它会覆盖控件的右侧。我最终将容器 div 设置为始终显示滚动条（溢出-y：滚动）。然后我在其中添加了一个 div，我可以使用它来获取其他控件的宽度和调整其大小。谢谢，布赖恩
强制滚动条很有意义。很高兴你找到了有用的东西。阅读我的 cmets，我听起来对设计建议有点自负。抱歉，我经常在深夜睡觉，因为大脑无法正常工作。

【解决方案3】：

你的问题引起了我的兴趣，我对另一个答案并不感到兴奋（没有冒犯，看起来很老套），尽管它可能有效。在谷歌搜索更好的方式时，我偶然发现了this jQuery plugin。使用这样的东西会很好，因为不同的浏览器可能会以不同的宽度呈现滚动条。

【讨论】：