Question

前段时间我在stackoverflow上找到了以下脚本，它似乎运行良好...对于初始页面加载，但我需要以某种方式使这更具响应性。当浏览器改变大小并在页面加载后出现div时，我需要以某种方式触发它。基本上＆＃34;生活＆＃34;并在需要时一直开火。我试过调整它但总是失败。我还需要两个不同的目标div。任何提示非常感谢：）

    (function($) {
$.fn.has_scrollbar = function() {
    var divnode = this.get(0);
    if(divnode.scrollHeight > divnode.clientHeight)
        return true;
 }
 })(jQuery);

 example:

if($('#scrollable').has_scrollbar()) { $("#scrollable").css({"width":"97%"}); 

}

更新：

这非常接近工作，如果滚动条消失，我需要一种撤消宽度调整的方法。 if / else语句是否会这样做，或者我需要一个新函数来检测是否存在滚动条，然后运行一个新的document.ready包装器说#xxx width 100％？

    function bindHasScrollbar() {
    (function($) {
    $.fn.has_scrollbar = function() {
    var divnode = this.get(0);
    if(divnode.scrollHeight > divnode.clientHeight)
        return true;
    }
    })(jQuery);
    }


   $(document).ready(function() {

   // Initial

bindHasScrollbar();
$("#story").css({"width":"97%"});
$("#minigallery").css({"width":"97%"});

   // Refresh
  $(window).resize(function() {


    bindHasScrollbar();
$("#story").css({"width":"97%"});
$("#minigallery").css({"width":"97%"});


  });
  });

Answer 1

制作包装器最简单，因此您可以动态重新绑定您的函数。我现在无法测试，但这个想法是正确的：

function bindHasScrollbar() {
    (function($) {
        $.fn.has_scrollbar = function() {
        var divnode = this.get(0);
        if(divnode.scrollHeight > divnode.clientHeight)
            return true;
        }
    })(jQuery);
}


$(document).ready(function() {
    // Initial
    bindHasScrollbar();

    // Refresh
    $(window).resize(function() {
        bindHasScrollbar();
    });
});

Answer 2

我建议使用live extensions来解决此类问题。看看＆＃34;元素媒体查询＆＃34;来自article的部分。

Answer 3

检测滚动条更改（clientHeight / clientWidth与scrollHeight / scrollWidth的更改）是没有＆＃34; direct＆＃34;解。 solution有助于检测容器调整大小，但是，它很丑陋。

最好的crossbrowser解决方案是每隔300-500毫秒用setInterval检查容器大小的变化。使用这种方式你应该记住最后的高度/宽度，并在高度或宽度改变时重新检查容器滚动条，因为以这个小间隔运行的函数应该尽可能少地执行代码。

更好的方法是将MutationObserver用于现代浏览器（以及旧版本的间隔）。我还没有检查过这种方式，但我希望在对它进行研究后，它将帮助我完成自己的任务。

如果你只想隐藏垂直滚动条 - 即使它是可见的也不要显示它，你可以使用下一个技术：用overflow:hidden将容器包装到另一个容器中，但没有高度/宽度，设置内部容器overflow-y:scroll始终显示垂直滚动条，margin-right:-17px使滚动条不在父容器中，滚动条将被隐藏。请注意，滚动条宽度可能因您使用的浏览器而异，因此您必须以某种方式检测它。但这是另一个问题。此外，滚动条宽度取决于缩放级别，这不太重要。

使用javascript进行滚动条检测

3 个答案: