Question

我正在编写一个jQuery插件，它使用了两个嵌套的＆lt; DIV＆gt;元件。

外部div有一个带溢出的固定宽度：scroll和内部div（更宽）包含我想要滚动的内容。

除了我想使用一些JavaScript（使用jQuery）将内部div的高度设置为与外部div的高度完全匹配，减去水平滚动条的高度之外，这一切都很好。 / p>

此刻我将它设置为外部div的高度，减去大约20个像素。这种工作，但它不会是浏览器独立的，绝对是一个黑客！

非常感谢任何帮助！

Answer 1

您需要使用element.clientHeight。在jQuery中会有类似的东西：

var heightWithoutScrollbar = $('#outer')[0].clientHeight;

Answer 2

我找到了一个可以get the width of a scrollbar

的函数

function getScrollBarWidth () {  
    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);  
};

OS Scrollbars的宽度是统一的，无论是垂直还是水平显示，因此您可以使用返回的宽度作为水平滚动条的高度。

编辑：我的原始代码同样不起作用，但是我已将代码更新为工作函数。你可以在这里看到它：http://jsbin.com/ejile3

该页面将提示滚动条的宽度。

如何使用JQuery获取<div>的高度不包括水平滚动条？</div>

2 个答案: