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

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

我所提出的方法允许我通过拖动来调整大小，但是如果“主”区域中有很多内容，而不是侧边栏，它就会抛出拖动

我希望能够一直拖动到屏幕的边缘，而不考虑其中的内容

我认为展示此问题的最佳方式是演示：

原始演示：

const resizer=document.querySelectorresizer； const sidebar=document.querySelectorsidebar； resizer.addEventListenermousedown，事件=>{ document.addEventListenermousemove、resize、false； document.addEventListenermouseup，=>{ document.removeEventListenermousemove、resize、false； }，假； }; 函数大小调整{ 常量大小=`${e.x}px`； sidebar.style.width=大小； } /** *助手 */ sidebar.style.width='325px'； const mainContent=document.queryselectormin-content； 函数addContent{ const mainContentStr=[…Array10.keys].mapi=>Main Content； mainContent.innerHTML++=mainContentStr.join'+'现在拖动以查看它有多困难，删除内容以查看它有多容易'； } 功能删除内容{ mainContent.innerHTML=； } document.queryselectorad-content .addEventListener'单击'，=>addContent document.queryselect或remove-content .addEventListener'单击'，=>删除内容 身体{ 位置：相对位置； 高度：自动； 最小高度：100vh； 显示器：flex； -网络工具包盒方向：垂直； -webkit盒方向：正常； 溢出：隐藏； 保证金：0； } 包装纸{ -网络工具包盒方向：垂直； -webkit盒方向：正常； 弯曲方向：立柱； 溢出：隐藏； 位置：绝对位置； 身高：100%； 宽度：100%； 显示器：flex； 保证金：0； 填充：0； } 容器{ 宽度：100%； 身高：100%； 弹性收缩：0； 位置：相对位置； 显示器：flex； 溢出：隐藏； 保证金：0； 填充：0； 框大小：边框框； } 边栏{ 身高：100%； 位置：相对位置； 边际0； 填充：0； 框大小：边框框； 背景：浅灰色； 边框：2px实心暗光； } 增塑剂{ 位置：相对位置； z指数：2； 宽度：18px； 光标：col resize； 左边框：1px实心rgba255、255、255、0.05； 右边框：1px实心rgba0,0,0,0.4； 背景：333642； 保证金：0； 填充：0； 框大小：边框框； } 主要{ 背景：浅蓝色； 身高：100%； 柔性生长：1； 弯曲方向：行； 位置：相对位置； 显示器：flex； 保证金：0； 填充：0； } 添加内容{ 宽度：80px； 浮动：对； 背景色：森林绿； } 删除内容{ 宽度：80px； 浮动：对； 背景颜色：鲑鱼； } 边栏内容

添加内容 删除内容

要在Flexbox中设置固定不变的宽度，请使用而不是宽度。然后，根据可用空间以及flex grow和flex shrink的属性，flex项可以从该固定大小收缩或增长

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

这里有一个有效的例子。我只是在JS和CSS中将width属性调整为FlexBasis。然后，我还向主栏和侧栏添加了一个最小宽度属性0px

const resizer=document.querySelectorresizer； const sidebar=document.querySelectorsidebar； resizer.addEventListenermousedown，事件=>{ document.addEventListenermousemove、resize、false； document.addEventListenermouseup，=>{ document.removeEventListenermousemove、resize、false； }，假； }; 函数大小调整{ 常量大小=`${e.x}px`； sidebar.style.flexBasis=尺寸； } /** *助手 */ sidebar.style.flexBasis='325px'； const mainContent=document.queryselectormin-content； 函数addContent{ const mainContentStr=[…Array10.keys].mapi=>Main Content； mainContent.innerHTML++=mainContentStr.join'+'现在拖动以查看它有多困难，删除内容以查看它有多容易'； } 功能删除内容{ mainContent.innerHTML=； } document.queryselectorad-content .addEventListener'单击'，=>addContent document.queryselect或remove-content .addEventListener'单击'，=>删除内容 身体{ 位置：相对位置； 高度：自动； 最小高度：100vh； 显示器：flex； -网络工具包盒方向：垂直； -webkit盒方向：正常； 溢出：隐藏； 保证金：0； } 包装纸{ -网络工具包盒方向：垂直； -webkit盒方向：正常； 弯曲方向：立柱； 溢出：hidd EN 位置：绝对位置； 身高：100%； 宽度：100%； 显示器：flex； 保证金：0； 填充：0； } 容器{ 宽度：100%； 身高：100%； 弹性收缩：0； 位置：相对位置； 显示器：flex； 溢出：隐藏； 保证金：0； 填充：0； 框大小：边框框； } 边栏{ 身高：100%； 位置：相对位置； 边际0； 填充：0； 框大小：边框框； 背景：浅灰色； 边框：2px实心暗光； 最小宽度：0； } 增塑剂{ 弹性基础：18px； 位置：相对位置； z指数：2； 光标：col resize； 左边框：1px实心rgba255、255、255、0.05； 右边框：1px实心rgba0,0,0,0.4； 背景：333642； 保证金：0； 填充：0； 框大小：边框框； } 主要{ 弹性基准：0； 柔性生长：1； 最小宽度：0； 背景：浅蓝色； 身高：100%； 弯曲方向：行； 位置：相对位置； 显示器：flex； 保证金：0； 填充：0； } 添加内容{ 宽度：80px； 浮动：对； 背景色：森林绿； } 删除内容{ 宽度：80px； 浮动：对； 背景颜色：鲑鱼； } 边栏内容

添加内容 删除内容

要在Flexbox中设置固定不变的宽度，请使用而不是宽度。然后，根据可用空间以及flex grow和flex shrink的属性，flex项可以从该固定大小收缩或增长

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

这里有一个有效的例子。我只是在JS和CSS中将width属性调整为FlexBasis。然后，我还向主栏和侧栏添加了一个最小宽度属性0px

const resizer=document.querySelectorresizer； const sidebar=document.querySelectorsidebar； resizer.addEventListenermousedown，事件=>{ document.addEventListenermousemove、resize、false； document.addEventListenermouseup，=>{ document.removeEventListenermousemove、resize、false； }，假； }; 函数大小调整{ 常量大小=`${e.x}px`； sidebar.style.flexBasis=尺寸； } /** *助手 */ sidebar.style.flexBasis='325px'； const mainContent=document.queryselectormin-content； 函数addContent{ const mainContentStr=[…Array10.keys].mapi=>Main Content； mainContent.innerHTML++=mainContentStr.join'+'现在拖动以查看它有多困难，删除内容以查看它有多容易'； } 功能删除内容{ mainContent.innerHTML=； } document.queryselectorad-content .addEventListener'单击'，=>addContent document.queryselect或remove-content .addEventListener'单击'，=>删除内容 身体{ 位置：相对位置； 高度：自动； 最小高度：100vh； 显示器：flex； -网络工具包盒方向：垂直； -webkit盒方向：正常； 溢出：隐藏； 保证金：0； } 包装纸{ -网络工具包盒方向：垂直； -webkit盒方向：正常； 弯曲方向：立柱； 溢出：隐藏； 位置：绝对位置； 身高：100%； 宽度：100%； 显示器：flex； 保证金：0； 填充：0； } 容器{ 宽度：100%； 身高：100%； 弹性收缩：0； 位置：相对位置； 显示器：flex； 溢出：隐藏； 保证金：0； 填充：0； 框大小：边框框； } 边栏{ 身高：100%； 位置：相对位置； 边际0； 填充：0； 框大小：边框框； 背景：浅灰色； 边框：2px实心暗光； 最小宽度：0； } 增塑剂{ 弹性基础：18px； 位置：相对位置； z指数：2； 光标：col resize； 左边框：1px实心rgba255、255、255、0.05； 右边框：1px实心rgba0,0,0,0.4； 背景：333642； 保证金：0； 填充：0； 框大小：边框框； } 主要{ 弹性基准：0； 柔性生长：1； 最小宽度：0； 背景：浅蓝色； 身高：100%； 弯曲方向：行； 位置：相对位置； 显示器：flex； 保证金：0； 填充：0； } 添加内容{ 宽度：80px； 浮动：对； 背景色：森林绿； } 删除内容{ 宽度：80px； 浮动：对； 背景颜色：鲑鱼； } 边栏内容

添加内容 删除内容

---

嘿@Richard-我还有最后一个问题。。我已经用你的代码更新了我的问题，但是在主界面有按钮。。。注意按钮是如何垂直拉伸的。。我该如何解决这一问题，以使事物表现为“正常”的意思，它们通常彼此相邻？@MattOestreich flexbox容器的对齐项的默认值是拉伸。这意味着所有flex项目都将拉伸以填充其容器。要覆盖此默认值，可以在容器主节点上使用align items:flex start。此外，请删除按钮上的浮动属性。嘿@Richard-我还有最后一个问题。。我已经更新了m

---

用你的代码演示你的问题，但是在主界面有按钮。。。注意按钮是如何垂直拉伸的。。我该如何解决这一问题，以使事物表现为“正常”的意思，它们通常彼此相邻？@MattOestreich flexbox容器的对齐项的默认值是拉伸。这意味着所有flex项目都将拉伸以填充其容器。要覆盖此默认值，可以在容器主节点上使用align items:flex start。此外，请清除按钮上的浮动属性。