Question

第一个问题：如果内部的内容没有改变但div宽度确实（例如在窗口调整大小事件上），scrollWidth值是否真的会改变？我认为不应该这样，但我不确定为什么我会遇到我遇到的问题。

如果应该更改，那么当div宽度发生变化时，我遇到滚动宽度没有更新到正确值的问题。

我有一个div，它将另一个div（通过jQuery）的宽度设置为scrollWidth。有一个面板位于父div的旁边，可以打开和关闭，根据父div的宽度是打开还是关闭来改变父div的宽度。当这个面板打开或关闭时，父div的scrollWidth似乎没有改变（这对我来说有点意义），但是对于像窗口调整大小事件这样的东西，子div的宽度被设置为scrollwidth父div的调整不适当，而是溢出父div（见图）。当父元素打开/关闭时（在我的情况下使用#openAttrTable按钮）并且屏幕上打开或关闭面板影响父div实例化的宽度时，scrollWidth属性似乎只会更改。

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

多个按钮控制侧面板的打开，打开属性表，然后根据打开的内容设置滚动宽度。你注意到点击#display-map-info时我必须手动添加和减去scrollWidth中的像素以使拖动条适当地填充空间，我不确定为什么只将它设置为scrollWidth并不是＃39;工作。如果我不减去像素，拖动条将溢出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非常相似，但是只更新而不是仅在某些情况下更新。< / p>

$(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);
    }
});

scrollWidth是否随div宽度而变化？

1 个答案: