0

在我的页面中，我希望检测页面是否有垂直滚动条，如果有，需要检测滚动条的宽度，这样我可以将我的 body 缩小宽度，从而防止我的侧边栏改变位置查看非滚动页面到滚动页面。我有以下 jQuery/Javascript 代码：

        $(document).ready(function () {
        var parent, child, width;

        if (width === undefined) {
            parent = $('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo('body');
            child = parent.children();
            width = child.innerWidth() - child.height(99).innerWidth();
            parent.remove();
        }

        if ($("body").height() > $(window).height()) {
            //change width of body here
        }
    });

不幸的是，这段代码对我不起作用。有人可以让我知道我要去哪里错了吗？

4

2 回答 2

0 
(function($) {
    $.fn.ScrollBarWidth = function() {
        if (this.get(0).scrollHeight > this.height()) { //check if element has scrollbar
            var inner = document.createElement('p');
            inner.style.width = "100%";
            inner.style.height = "200px";
            var outer = document.createElement('div');
            outer.style.position = "absolute";
            outer.style.top = "0px";
            outer.style.left = "0px";
            outer.style.visibility = "hidden";
            outer.style.width = "200px";
            outer.style.height = "150px";
            outer.style.overflow = "hidden";
            outer.appendChild(inner);
            document.body.appendChild(outer);
            var w1 = inner.offsetWidth;
            outer.style.overflow = 'scroll';
            var w2 = inner.offsetWidth;
            if (w1 == w2) w2 = outer.clientWidth;
            document.body.removeChild(outer);
            return (w1 - w2);
        }
    }
})(jQuery);

像这样运行：

var scrollbarWidth = $('body').ScrollBarWidth();
console.log(scrollbarWidth);​ //prints the scrollbar width to the console

小提琴

于 2012-08-11T14:44:58.087 回答
0

您不需要更改body. 默认情况下，它是窗口宽度的 100%，并且会在出现滚动条时进行调整。

但是，如果由于某种原因您不能将宽度设置为 100%，请首先查看禁用水平滚动条是否对您有帮助：

overflow-x: hidden;

如果这不能解决问题，请使用此处的函数来获取滚动条的宽度。然后，监听windowresize 事件：

var $window = $(window),
    $body = $('body');

function resize() {
    if ($body.height() > $window.height()) {
        $body.width($body.width() - getScrollBarWidth());
    }
}

$(window).resize(resize);​
于 2012-08-11T14:52:12.057 回答