div元素達到特定寬度時如何停止調整大小？

Question

我嘗試使用jquery-resizable.js制作一個帶有可調整大小側邊欄的網站。 我想要做的是在達到特定寬度后停止調整大小。 但是，即使它已經超過了最小寬度值，它也會繼續移動。 我找到了ResizeObserver來檢測不斷變化的寬度值，並嘗試更改 div 元素的 CSS 值，例如resize:none; 但它沒有用。

一旦達到一定的寬度值，我怎么能停止調整大小？

這是我的代碼。

 $(".panel-left").resizable({ handleSelector: ".splitter", resizeHeight: false, resizeHeightFrom:'center', }); var ro = new ResizeObserver(entries => { for (let entry of entries) { const cr = entry.contentRect; console.log('Element:', entry.target); console.log(`Element size: ${cr.width}px x ${cr.height}px`); console.log(`Element padding: ${cr.top}px; ${cr.left}px`); if (cr.width <= 330) { console.log("its too small"); cr.css('resize', 'none'); } } }); ro.observe(document.querySelector('.panel-right'));

 .panel-container { display: flex; flex-direction: row; border: 1px solid silver; overflow: hidden; }.panel-left { flex: 0 0 auto; padding: 10px; width: 900px; /* min-height: 100%; */ min-width: 650px; white-space: nowrap; background: #8E44AD; color: white; }.panel-right { flex: 1 0 auto; padding: 10px; width: 300px; /* min-height: 100%; */ min-width: 350px; background: #34495E; color: #fff; overflow-x: hidden; }.splitter { flex: 0 0 auto; width: 8px; background: url(images/vsizegrip.png) center center no-repeat #ccc; min-height: 100%; cursor: col-resize; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://www.jqueryscript.net/demo/jQuery-Plugin-To-Generate-Resizable-DOM-Elements-Resizable/src/jquery-resizable.js"></script> <div class="panel-container el" style="height:100%;"> <div class="panel-left resizable"> left panel </div> <div class="splitter"> </div> <div class="panel-right" id="panelRight"> right panel </div> </div>

Answer 1

像@JHeth 提到的max-width ，您嘗試做的事情是可能的。

您可以設置min-width以設置 div 的最小寬度和max-width以停止在您想要的像素大小上。

.panel-left {
    min-width: 50px;
    max-width: 200px;
    width: 50%;
}

請參見下面的示例：

 $(".panel-left").resizable({ handleSelector: ".splitter", resizeHeight: false, resizeHeightFrom:'center', });

 .panel-container { display: flex; flex-direction: row; border: 1px solid silver; overflow: hidden; width: 100%; }.panel-left { flex: 0 0 auto; padding: 10px; min-height: 100vh; min-width: 50px; max-width: 200px; white-space: nowrap; background: #8E44AD; color: white; width: 50%; }.panel-right { flex: 1 0 auto; padding: 10px; min-height: 100vh; background: #34495E; color: #fff; overflow-x: hidden; }.splitter { flex: 0 0 auto; width: 8px; background: url(images/vsizegrip.png) center center no-repeat #ccc; min-height: 100%; cursor: col-resize; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://www.jqueryscript.net/demo/jQuery-Plugin-To-Generate-Resizable-DOM-Elements-Resizable/src/jquery-resizable.js"></script> <div class="panel-container el" style="height:100%;"> <div class="panel-left resizable"> left panel </div> <div class="splitter"> </div> <div class="panel-right" id="panelRight"> right panel </div> </div>