jquery - scrollWidth 是否随 div 宽度变化？

Question

第一个问题:如果里面的内容没有改变但 div 宽度改变了(比如在窗口调整大小事件中)，scrollWidth 值真的应该改变吗？我认为不应该，但后来我不确定为什么我会遇到这些问题。

如果它应该改变，那么当 div 宽度改变时，我遇到了 scrollWidth 没有更新到正确值的问题。

我有一个 div，它将另一个 div(通过 jQuery)的宽度设置为 scrollWidth。父 div 旁边有一个面板可以打开和关闭，根据它是打开还是关闭来更改父 div 的宽度。当此面板打开或关闭时，父 div 的 scrollWidth 似乎没有改变(这对我来说很有意义)，但在类似窗口调整大小事件中，子 div 的宽度设置为父 div 的滚动宽度没有适本地调整大小，而是溢出了父 div(见图)。 scrollWidth 属性似乎只在父元素打开/关闭时发生变化(在我的例子中使用 #openAttrTable 按钮)并且面板打开或关闭屏幕会影响实例化父 div 的宽度与。

基本上，每次更改父 div 宽度时，我都需要更新 scrollWidth 属性，即使父 div 已经实例化也是如此。

多个按钮控制侧面板的打开、属性表的打开，然后根据打开的内容设置滚动宽度。您会注意到，在单击 #display-map-info 时，我必须手动从 scrollWidth 中添加和减去像素以使拖动条适本地填充空间，我不确定为什么只设置它到 scrollWidth 不起作用。如果我不减去像素，拖动条将溢出 div 并与图层面板重叠(见图)。

//Creates the slide out animation for the layers panel
$('#display-map-info').click(function () {
    $('#map-functions').toggle("slide", { direction: "right" }, 500);
    $('#map-functions').toggleClass("visible");
    //If attribute table is already open and layers panel is opening on this click
    if ($("#attribute-table").hasClass("open") && $("#map-functions").hasClass("visible")) {
        $("#attribute-table").animate({ width: '-=250px' }, 500);
        //Set drag-bar width and animate with opening of layers panel
        var width = $("#attribute-table")[0].scrollWidth;
        $("#attrTable-handle").css("width", width);
        $("#attrTable-handle").animate({ width: '-=250px' }, 500);
    }
    //If only attribute table is open
    else if ($("#attribute-table").hasClass("open")) {
        $("#attribute-table").animate({ width: '+=250px' }, 500);
        //Set drag-bar width
        var width = $("#attribute-table")[0].scrollWidth + 250;
        $("#attrTable-handle").css("width", width);
    }
});
//Open attribute table on button click, set the width based on whether the layers panel is open or not
$("#openAttrTable").click(function () {
    if ($("#map-functions").hasClass("visible")) {
        $("#attribute-table").css("width", "100%").css("width", "-=300px");
        $("#attribute-table").toggleClass("open");
        $("#attribute-table").toggle();
        //Set drag-bar width
        var width = $("#attribute-table")[0].scrollWidth;
        $("#attrTable-handle").css("width", width);
    }
    else {
        $("#attribute-table").css("width", "100%").css("width", "-=50px");
        $("#attribute-table").toggleClass("open");
        $("#attribute-table").toggle();
        //Set drag-bar width
        var width = $("#attribute-table")[0].scrollWidth;
        $("#attrTable-handle").css("width", width);
    }
});

//When window resizes, resize attribute table based on whether layers panel is open or not
$(window).resize(function () {
    if ($("#map-functions").hasClass("visible") && $("#attribute-table").hasClass("open")) {
        $("#attribute-table").css("width", "100%").css("width", "-=300px");
        //Set drag-bar width
        var width = $("#attribute-table")[0].scrollWidth;
        $("#attrTable-handle").css("width", width);
    }
    else if ($("#attribute-table").hasClass("open")) {
        $("#attribute-table").css("width", "100%").css("width", "-=50px");
        //Set drag-bar width
        var width = $("#attribute-table")[0].scrollWidth;
        $("#attrTable-handle").css("width", width);
    }
});

#map-functions {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 250px;
  top: 115px;
  right: 50px;
  bottom: 0;
  padding: 9px;
  background-color: #fff;
  border: 5px solid orange;
  overflow-x: hidden;
}

#attribute-table {
    display: none;
    position: fixed;
    left: 0;
    height: 250px;
    bottom: 0 !important;
    top: auto !important;
    padding-top: 7px;
    background-color: white;
    z-index: 31;
}

#attrTable-handle {
    height: 5px;
    background-color: orange;
    top: 0;
}

HTML:

<div class="visible" id="map-functions"></div>
<div id="attribute-table">
   <div id="attrTable-handle"></div>
</div>

Answer 1

仅使用 .width() 方法找到了解决方法。我没有意识到此方法会返回 div 的整个宽度，而不仅仅是屏幕上可见的宽度，因此它与 scrollWidth 非常相似，但会持续更新而不是仅在某些情况下更新。

$(window).resize(function () {
    if ($("#map-functions").hasClass("visible") && $("#attribute-table").hasClass("open")) {
        $("#attribute-table").css("width", "100%").css("width", "-=300px");
        //Set drag-bar width
        var width = $("#attribute-table").width();
        $("#attrTable-handle").css("width", width);
    }
    else if ($("#attribute-table").hasClass("open")) {
        $("#attribute-table").css("width", "100%").css("width", "-=50px");
        //Set drag-bar width
        var width = $("#attribute-table").width();
        $("#attrTable-handle").css("width", width);
    }
});