用于调整两个 div 大小的垂直拖动条

Question

我想要一个垂直的 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 isHandlerDragging = false;

document.addEventListener('mousedown', function(e) {
  // If mousedown event is fired from .handler, toggle flag to true
  if (e.target === handler) {
    isHandlerDragging = true;
  }
});

document.addEventListener('mousemove', function(e) {
  // Don't do anything if dragging flag is false
  if (!isHandlerDragging) {
    return false;
  }

  // Get offset
  var containerOffsetTop= wrapper.offsetTop;
  var containerOffsetBottom= wrapper.offsetBottom;


  // Get x-coordinate of pointer relative to container
  var pointerRelativeXpos = e.clientY - containerOffsetTop;
  var pointerRelativeXpos2 = e.clientY - e.offsetTop + e.offsetHeight;
  
 
  var boxAminWidth = 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', function(e) {
  // Turn off dragging flag when user mouse is up
  isHandlerDragging = false;
});

body {
  margin: 40px;
}

.wrapper {
  background-color: #fff;
  color: #444;
  /* Use flexbox */
  
}

.box1, .box2 {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  margin-top:2%;
  
  /* Use box-sizing so that element's outerwidth will match width property */
  box-sizing: border-box;
  
  /* Allow box to grow and shrink, and ensure they are all equally sized */
 
}

.handler {
  width: 20px;
  height:7px;
  padding: 0;
  cursor: ns-resize;
}

.handler::before {
  content: '';
  display: block;
  width: 100px;
  height: 100%;
  background: red;
  margin: 0 auto;
}

<div class="wrapper">
  <div class="box1">A</div>
  <div class="handler"></div>
  <div class="box2">B</div>
</div>

希望我清楚地解释了我在项目中面临的问题。任何帮助表示赞赏。

Answer 1

看起来你在正确的轨道上。您只需要使用 flex direction 列使包装器成为一个 flexbox 并为其分配一个高度。盒子 2 的 flex 也需要为 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 isHandlerDragging = false;

    document.addEventListener('mousedown', function(e) {
        // If mousedown event is fired from .handler, toggle flag to true
        if (e.target === handler) {
            isHandlerDragging = true;
        }
    });

    document.addEventListener('mousemove', function(e) {
        // Don't do anything if dragging flag is false
        if (!isHandlerDragging) {
            return false;
        }

        e.preventDefault();

        // Get offset
        var containerOffsetTop= wrapper.offsetTop;
        var containerOffsetBottom= wrapper.offsetBottom;


        // Get x-coordinate of pointer relative to container
        var pointerRelativeXpos = e.clientY - containerOffsetTop;
        var pointerRelativeXpos2 = e.clientY - e.offsetTop + e.offsetHeight;


        var boxAminWidth = 30;


        boxA.style.height = (Math.max(boxAminWidth, pointerRelativeXpos - 2)) + 'px';
        boxB.style.height = (Math.max(boxAminWidth, pointerRelativeXpos2 - 8)) + 'px';
    });
    document.addEventListener('mouseup', function(e) {
        // Turn off dragging flag when user mouse is up
        isHandlerDragging = false;
    });

body {
            margin: 40px;
        }

        .wrapper {
            background-color: #fff;
            color: #444;
            /* Use flexbox */
            display: flex;
            flex-direction: column;
            height: 200px;
        }

        .box1, .box2 {
            background-color: #444;
            color: #fff;
            border-radius: 5px;
            padding: 20px;
            font-size: 150%;
            margin-top:2%;

            /* Use box-sizing so that element's outerwidth will match width property */
            box-sizing: border-box;

            /* Allow box to grow and shrink, and ensure they are all equally sized */

        }


        .box2 {
            flex: 1;
        }

        .handler {
            width: 20px;
            height:7px;
            padding: 0;
            cursor: ns-resize;
        }

        .handler::before {
            content: '';
            display: block;
            width: 100px;
            height: 100%;
            background: red;
            margin: 0 auto;
        }

<div class="wrapper">
    <div class="box1">A</div>
    <div class="handler"></div>
    <div class="box2">B</div>
</div>