可调整大小的侧边栏 - 拖动以调整大小

Question

我正在尝试创建一个布局，它允许您通过拖动侧边栏的一个边缘来调整它的大小。这种行为可以在 CodePen/CodeSandbox 等中看到。 - 你可以拖动每个“代码窗口”来调整它的大小。我正在寻找与页面布局相同的行为。

我想出的东西允许我拖动来调整大小，但是如果“主要”区域（不是侧边栏的区域）中有很多内容，它就会摆脱拖动。

我希望能够一直拖动到屏幕边缘，而不管里面的内容如何。

我认为展示这个问题的最好方法是通过一个演示：

原始演示：

const resizer = document.querySelector("#resizer");
const sidebar = document.querySelector("#sidebar");

resizer.addEventListener("mousedown", (event) => {
  document.addEventListener("mousemove", resize, false);
  document.addEventListener("mouseup", () => {
    document.removeEventListener("mousemove", resize, false);
  }, false);
});

function resize(e) {
  const size = `${e.x}px`;
  sidebar.style.width = size;
}

/** 
 * Helpers 
 */

sidebar.style.width = '325px';
const mainContent = document.querySelector("#main-content");

function addContent() {
  const mainContentStr = [...Array(10).keys()].map(i => "Main Content");
  mainContent.innerHTML += mainContentStr.join(' ') + '<br /><br /><h1>Now drag to see how difficult it is, remove content to see how easy it is</h1>';
}

function removeContent() {
  mainContent.innerHTML = '';
}

document.querySelector("#add-content")
  .addEventListener('click', () => addContent())

document.querySelector("#remove-content")
  .addEventListener('click', () => removeContent())

body {
  position: relative;
  height: auto;
  min-height: 100vh;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  overflow: hidden;
  margin: 0;
}

#wrapper {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  overflow: hidden;
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  margin: 0;
  padding: 0;
}

#container {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  position: relative;
  display: flex;
  overflow: hidden;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#sidebar {
  height: 100%;
  position: relative;
  margin 0;
  padding: 0;
  box-sizing: border-box;
  background: lightgray;
  border: 2px solid darkgray;
}

#resizer {
  position: relative;
  z-index: 2;
  width: 18px;
  cursor: col-resize;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  border-right: 1px solid rgba(0, 0, 0, 0.4);
  background: #333642;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#main {
  background: lightblue;
  height: 100%;
  flex-grow: 1;
  flex-direction: row;
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
}

#add-content {
  width: 80px;
  float: right;
  background-color: forestgreen;
}

#remove-content {
  width: 80px;
  float: right;
  background-color: salmon;
}

<div id="wrapper">
  <div id="container">
    <div id="sidebar">
      <p>Sidebar content</p>
      <button id="add-content">Add Content</button>
      <button id="remove-content">Remove Content</button>
    </div>
    <div id="resizer"></div>
    <div id="main">
      <p id="main-content"></p>
    </div>
  </div>
</div>

---

更新的演示：

添加按钮后，它们看起来垂直拉伸 100%

const resizer = document.querySelector("#resizer");
const sidebar = document.querySelector("#sidebar");

resizer.addEventListener("mousedown", (event) => {
  document.addEventListener("mousemove", resize, false);
  document.addEventListener("mouseup", () => {
    document.removeEventListener("mousemove", resize, false);
  }, false);
});

function resize(e) {
  const size = `${e.x}px`;
  sidebar.style.flexBasis = size;
}

/** 
 * Helpers 
 */

sidebar.style.flexBasis = '325px';
const mainContent = document.querySelector("#main-content");

function addContent() {
  const mainContentStr = [...Array(10).keys()].map(i => "Main Content");
  mainContent.innerHTML += mainContentStr.join(' ') + '<br /><br /><h1>Now drag to see how difficult it is, remove content to see how easy it is</h1>';
}

function removeContent() {
  mainContent.innerHTML = '';
}

document.querySelector("#add-content")
  .addEventListener('click', () => addContent())

document.querySelector("#remove-content")
  .addEventListener('click', () => removeContent())

body {
  position: relative;
  height: auto;
  min-height: 100vh;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  overflow: hidden;
  margin: 0;
}

#wrapper {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  overflow: hidden;
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  margin: 0;
  padding: 0;
}

#container {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  position: relative;
  display: flex;
  overflow: hidden;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#sidebar {
  height: 100%;
  position: relative;
  margin 0;
  padding: 0;
  box-sizing: border-box;
  background: lightgray;
  border: 2px solid darkgray;
  
  min-width: 0;
}

#resizer {
  flex-basis: 18px;

  position: relative;
  z-index: 2;
  cursor: col-resize;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  border-right: 1px solid rgba(0, 0, 0, 0.4);
  background: #333642;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#main {
  flex-basis: 0;
  flex-grow: 1;
  min-width: 0;

  background: lightblue;
  height: 100%;
  flex-direction: row;
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
}

#add-content {
  width: 80px;
  float: right;
  background-color: forestgreen;
}

#remove-content {
  width: 80px;
  float: right;
  background-color: salmon;
}

<div id="wrapper">
  <div id="container">
    <div id="sidebar">
      <p>Sidebar content</p>
    </div>
    <div id="resizer"></div>
    <div id="main">
      <button id="add-content">Add Content</button>
      <button id="remove-content">Remove Content</button>
      <p id="main-content"></p>
    </div>
  </div>
</div>

Answer 1

要在 Flexbox 中设置固定不变的宽度，请使用flex-basis代替width。从这个固定大小的，柔性的项目就可以缩小或放大取决于可用空间和属性flex-grow和flex-shrink。

此外，min-width弹性项目的默认值是auto。这意味着项目的宽度不能小于其内容大小，即使您将其设置flex-basis为0px. 这意味着我们必须覆盖默认min-width值，0px以便在拖动#resizer元素时，它可以完全缩小自身。

这是一个工作示例。我只是在 JS 和 CSS 中调整了你的width属性flex-basis。然后，我还加了min-width财产0px既#main和#sidebar。

const resizer = document.querySelector("#resizer");
const sidebar = document.querySelector("#sidebar");

resizer.addEventListener("mousedown", (event) => {
  document.addEventListener("mousemove", resize, false);
  document.addEventListener("mouseup", () => {
    document.removeEventListener("mousemove", resize, false);
  }, false);
});

function resize(e) {
  const size = `${e.x}px`;
  sidebar.style.flexBasis = size;
}

/** 
 * Helpers 
 */

sidebar.style.flexBasis = '325px';
const mainContent = document.querySelector("#main-content");

function addContent() {
  const mainContentStr = [...Array(10).keys()].map(i => "Main Content");
  mainContent.innerHTML += mainContentStr.join(' ') + '<br /><br /><h1>Now drag to see how difficult it is, remove content to see how easy it is</h1>';
}

function removeContent() {
  mainContent.innerHTML = '';
}

document.querySelector("#add-content")
  .addEventListener('click', () => addContent())

document.querySelector("#remove-content")
  .addEventListener('click', () => removeContent())

body {
  position: relative;
  height: auto;
  min-height: 100vh;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  overflow: hidden;
  margin: 0;
}

#wrapper {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  overflow: hidden;
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  margin: 0;
  padding: 0;
}

#container {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  position: relative;
  display: flex;
  overflow: hidden;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#sidebar {
  height: 100%;
  position: relative;
  margin 0;
  padding: 0;
  box-sizing: border-box;
  background: lightgray;
  border: 2px solid darkgray;
  
  min-width: 0;
}

#resizer {
  flex-basis: 18px;

  position: relative;
  z-index: 2;
  cursor: col-resize;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  border-right: 1px solid rgba(0, 0, 0, 0.4);
  background: #333642;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#main {
  flex-basis: 0;
  flex-grow: 1;
  min-width: 0;

  background: lightblue;
  height: 100%;
  flex-direction: row;
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
}

#add-content {
  width: 80px;
  float: right;
  background-color: forestgreen;
}

#remove-content {
  width: 80px;
  float: right;
  background-color: salmon;
}

<div id="wrapper">
  <div id="container">
    <div id="sidebar">
      <p>Sidebar content</p>
      <button id="add-content">Add Content</button>
      <button id="remove-content">Remove Content</button>
    </div>
    <div id="resizer"></div>
    <div id="main">
      <p id="main-content"></p>
    </div>
  </div>
</div>