javascript - 可调整大小的侧边栏 : How to set the maximum width of the main area

Question

我有一个侧边栏可调整大小的布局。我已经使用 Javascript 做到了。但我希望它具有调整大小的最大值和最小值。我通过设置侧边栏的最大宽度和最小宽度来为侧边栏部分完成此操作。但问题是，即使使用 max-width 限制了侧边栏，主要区域也会减少(扩展时)。我一直在根据光标指针移动(使用 js )向主区域添加 margin-left 属性。但是没有允许我们设置最大或最小 margin-left 的属性。我怎样才能做到这一点。有人可以对此提出任何解决方法吗？
Js Fiddle - 整个代码 - https://jsfiddle.net/pdo4yjmg/
请尝试在 fiddle 结果中扩展到 400px 以上，您可以在那里看到问题(400px 是最大宽度)
Js部分 -

var element = document.getElementById('resizable');
  if (element) {
    var resizer = document.createElement('div');
    resizer.className = 'draghandle';
    resizer.style.width = '6px';
    resizer.style.height = '100vh';
    element.appendChild(resizer);
    resizer.addEventListener('mousedown', initResize, false);
  }

  function initResize(e) {
    window.addEventListener('mousemove', Resize, false);
    window.addEventListener('mouseup', stopResize, false);
    document.getElementById("mainArea").classList.add('marginLeft')
  }

  function Resize(e) {
    element.style.width = (e.clientX - element.offsetLeft) + 'px';
    document.getElementById("mainArea").style.marginLeft = (e.clientX - element.offsetLeft) + 'px';
  }

  function stopResize(e) {
    window.removeEventListener('mousemove', Resize, false);
    window.removeEventListener('mouseup', stopResize, false);
  }

Answer 1

由于您已成功将侧边栏限制为 min-width的 200和 max-width的 400 , 我建议你用你的 margin-left 做同样的事情. 但是 CSS 中没有这样的属性可以限制边距 , 你需要求助于 JavaScript .也许你在哪里设置了 margin-left mainArea，确保你的新值在 200 到 400 之间:

document.getElementById("mainArea").style.marginLeft = Math.min(Math.max(parseInt((e.clientX - element.offsetLeft)), 200), 400) + 'px';

另见 How can I use JavaScript to limit a number between a min/max value?