处理滚动条和jquery .width()方法

Dealing with scroll bars and jquery .width() method

本文关键字：方法 width jquery 滚动条 处理      更新时间：2023-09-26

jQuery的.width()方法似乎没有考虑滚动条。这对我来说是有问题的，因为我想将一些子元素的宽度设置为与其父元素的宽度相等。我使用的jQuery类似如下:

$('#contentDiv').width($('#containerDiv').width())

在这个例子中，#contentDiv是我想要设置大小的元素，我想把它的宽度设置为#containerDiv，这是它的父元素。我的问题是，这切断了#contentDiv的一面，正如在这个小提琴中看到的。

在我的实际代码中，我有几个元素，我用jQuery的大小，这都需要适合可滚动的div，所以只是设置#contentDiv的css为100%不是一个选项。在jQuery中处理div的滚动条宽度的最佳方法是什么?

我找到的最佳解决方案是:

http://chris-spittles.co.uk/?p = 531

jQuery功能强大，但有时你只需要一点点原生JS就能渲染出像素完美的页面。我希望你会发现这个解决方案有帮助!

UPDATED:

没有jQuery的宽度查找方法考虑滚动条。在我最初的示例中，使用.innerWidth(true)看起来是有效的，但只是因为它返回一个对象，这导致width失败，内部内容大小本身适合可用空间，因为示例不是很好。但是，可以编写一个函数来计算包含滚动条的div中的可用空间，然后可以使用该函数来根据需要定位内容。

为了编写这个函数，我利用了这样一个事实:当一个div被附加到一个带有滚动条的div上时，它会占用整个可用宽度(即父元素的内部宽度减去滚动条的宽度)。

函数是这样的:

function noScrollWidth(div){
    var measureDiv = $('<div id="measureDiv">');
    div.append(measureDiv);
    var width = measureDiv.outerWidth();
    measureDiv.remove();
    return width
};

然后我用它来调整我的内容div:

$('#contentDiv').width(noScrollWidth($('#containerDiv')));

工作小提琴。

试试这个:

$('#contentDiv').width($('#containerDiv')[0].clientWidth)

有关该解决方案的更多信息，请参阅此StackOverflow答案

我尝试的另一种方法是将两个元素的box-sizing属性设置为'border-box'，并查看是否将您的contentDiv的宽度设置为100%然后按您想要的方式工作。

现在越来越少的项目担心粗糙的旧浏览器了，'border-box'可以让事情变得更容易使用。不过，一定要在多个平台上测试多个浏览器，因为我不确定它们都以相同的方式处理滚动条。

相关文章：