Javascript 用于调整两个div大小的垂直dragBar

我想要一个垂直的德拉巴来调整两个div的大小。我已经为同样的问题创建了一个例子，但我面临一个问题
实际：当我调整上div的大小并向下移动滑块时，父div的面积增加，因此给出了一个滚动条
预期：调整大小时，如果滑块向下移动，则应仅显示上div中包含的数据；如果滑块向上移动，则应显示下div的内容，且不应增加父div的全部长度。

var handler=document.querySelector（'.handler'）；
var wrapper=handler.closest（'.wrapper'）；
var-boxA=wrapper.querySelector（'.box1'）；
var-boxB=wrapper.querySelector（'.box2'）；
var ishandler=false；
document.addEventListener（'mousedown'，函数（e）{
//如果mousedown事件是从.handler触发的，则将标志切换为true
if（e.target==处理程序）{
IsHandlerDraging=true；
}
});
document.addEventListener（'mousemove'，函数（e）{
//如果拖动标志为false，则不要执行任何操作
如果（！IsHandlerDraging）{
返回false；
}
//获得偏移量
var containerOffsetTop=wrapper.offsetTop；
var containerOffsetBottom=wrapper.offsetBottom；
//获取指针相对于容器的x坐标
var pointerRelativeXpos=e.clientY-containerOffsetTop；
var pointerRelativeXpos2=e.clientY-e.offsetTop+e.offsetHeight；
var-Boxamin宽度=30；
boxA.style.height=（Math.max（boxAminWidth，pointerRelativeXpos-2））+'px'；
boxA.style.flexGrow=0；
boxB.style.height=（Math.max（boxAminWidth，pointerRelativeXpos2-8））+'px'；
boxB.style.flexGrow=0；
});
document.addEventListener（'mouseup'，函数（e）{
//当用户鼠标启动时关闭拖动标志
IsHandlerDraging=false；
});
正文{
利润率：40像素；
}
.包装纸{
背景色：#fff；
颜色：#444；
/*使用flexbox*/
}
.box1、.box2{
背景色：#444；
颜色：#fff；
边界半径：5px；
填充：20px；
字体大小：150%；
利润率最高：2%；
/*使用框大小调整，以便元素的外径与宽度属性匹配*/
框大小：边框框；
/*允许盒子增长和收缩，并确保它们大小相同*/
}
汉德勒先生{
宽度：20px；
高度：7px；
填充：0；
光标：ns调整大小；
}
.handler：：之前{
内容：''；
显示：块；
宽度：100px；
身高：100%；
背景：红色；
保证金：0自动；
}

A.
B
看起来你的计划是正确的。您只需要使用flex direction列将包装器设置为flexbox，并为其指定一个高度。另外，框2需要具有1的伸缩性，以便可以根据需要进行伸缩。最后，我需要删除JavaScript中将flex增长设置为0的代码。结果如下


var handler=document.querySelector（'.handler'）；
var wrapper=handler.closest（'.wrapper'）；
var-boxA=wrapper.querySelector（'.box1'）；
var-boxB=wrapper.querySelector（'.box2'）；
var ishandler=false；
document.addEventListener（'mousedown'，函数（e）{
//如果mousedown事件是从.handler触发的，则将标志切换为true
if（e.target==处理程序）{
IsHandlerDraging=true；
}
});
document.addEventListener（'mousemove'，函数（e）{
//如果拖动标志为false，则不要执行任何操作
如果（！IsHandlerDraging）{
返回false；
}
e、 预防默认值（）；
//获得偏移量
var containerOffsetTop=wrapper.offsetTop；
var containerOffsetBottom=wrapper.offsetBottom；
//获取指针相对于容器的x坐标
var pointerRelativeXpos=e.clientY-containerOffsetTop；
var pointerRelativeXpos2=e.clientY-e.offsetTop+e.offsetHeight；
var-Boxamin宽度=30；
boxA.style.height=（Math.max（boxAminWidth，pointerRelativeXpos-2））+'px'；
boxB.style.height=（Math.max（boxAminWidth，pointerRelativeXpos2-8））+'px'；
});
document.addEventListener（'mouseup'，函数（e）{
//当用户鼠标启动时关闭拖动标志
IsHandlerDraging=false；
});
正文{
利润率：40像素；
}
.包装纸{
背景色：#fff；
颜色：#444；
/*使用flexbox*/
显示器：flex；
弯曲方向：立柱；
高度：200px；
}
.box1、.box2{
背景色：#444；
颜色：#fff；
边界半径：5px；
填充：20px；
字体大小：150%；
利润率最高：2%；
/*使用框大小调整，以便元素的外径与宽度属性匹配*/
框大小：边框框；
/*允许盒子增长和收缩，并确保它们大小相同*/
}
.box2{
弹性：1；
}
汉德勒先生{
宽度：20px；
高度：7px；
填充：0；
光标：ns调整大小；
}
.handler：：之前{
内容：''；
显示：块；
宽度：100px；
身高：100%；
背景：红色；
保证金：0自动；
}

A.
B
可能重复的Hey非常感谢：）你救了我一天：）这解决了我上面提到的问题。但现在在这一变化之后，我面临着一个新的问题。滑块手柄即使在鼠标向上的状态下也可以滚动。无法猜测导致此问题的原因当您尝试在调整div的同时拖动某个对象时，似乎会发生此问题。例如，当您同时意外选择下一个时。我可以通过将e.preventDefault（）添加到您的mousemove事件中来防止这种情况。我已经编辑了我的答案：）嘿，我在我的JSFIDLE代码中尝试了同样的方法。它工作得很好。Thanx很多：）。但当我在自己的项目中尝试相同的代码时，问题再次出现。我正在发布我的项目的JSFIDLE示例。你能请便吗