flexbox中的可拖动拆分窗格窗口无法通过子元素 [英] Draggable split-pane windows in flexbox can't get past child elements

问题描述

我使用HTML / JS / CSS Flexbox实现了自己的拆分窗格。

I implemented my own split-pane with HTML/JS/CSS Flexbox.

在以下情况下，拆分器遇到了麻烦-其中一个面板具有固定大小（以px为单位），另一个则设置为增长（ flex-grow：1 ）。

I'm having trouble with the splitter in the following case- one of the panels has a fixed size (in px), and the other one is set to grow (flex-grow: 1).

如果另一个面板的子级尺寸相同，则不会滚动到末尾。

In case the other panel has children with size, it won't scroll to the end. It gets stuck at the size of the children.

能否通过CSS在拆分窗格面板上解决此问题，而不是在孩子身上解决此问题？

Can this be fixed with CSS on the split-pane panels but not on the children?

对我来说，使用flex非常重要，因为我想保持应用程序的响应能力，并希望在任何可能的地方都避免使用固定大小。

It's very important for me to use flex as I want to maintain responsiveness of my application, and want to avoid fixed sizes wherever I can.

这是我问题的 JSFiddle示例
。

This is a JSFiddle sample of my question.

下面给出的代码段。谢谢！

Code snippet given below. Thanks!

function startDrag() {
  glass.style = 'display: block;';
  glass.addEventListener('mousemove', drag, false);
}

function endDrag() {
  glass.removeEventListener('mousemove', drag, false);
  glass.style = '';
}

function drag(event) {
  var splitter = getSplitter();
  var panel = document.getElementById('c2');
  var currentWidth = panel.offsetWidth;
  var currentLeft = panel.offsetLeft;
  panel.style.width = (currentWidth - (event.clientX - currentLeft)) + "px";
}

function getSplitter() {
  return document.getElementById('splitter');
}

var con = document.getElementById('container');
var splitter = document.createElement('div');
var glass = document.getElementById('glass');
splitter.className = 'splitter';
splitter.id = 'splitter';
con.insertBefore(splitter, con.lastElementChild);
splitter.addEventListener('mousedown', startDrag, false);
glass.addEventListener('mouseup', endDrag, false);

.container {
  display: flex;
  border: 1px solid;
  width: 500px;
  height: 300px;
  position: absolute;
}
.c1 {
  background-color: blue;
  flex: 1;
  height: 100%;
}
.c2 {
  background-color: green;
  width: 150px;
}
.splitter {
  width: 20px;
  cursor: col-resize;
}
.glass {
  height: 100%;
  width: 100%;
  cursor: col-resize;
  display: none;
  position: absolute;
}
.grandchild {
  background-color: red;
  width: 50px;
  height: 50px;
}

<div id="container" class="container">
  <div id="glass" class="glass"></div>
  <div class="c1">
    <div class="grandchild"></div>
  </div>
  <div id="c2" class="c2"></div>
</div>

推荐答案

它被卡在子代的大小上

It gets stuck at the size of the children

使用 flexbox 时的预期行为。我猜想如果您想滚动到最后，那么您可以对孙子位置：绝对 $ c>相对于 c1 ：

This is expected behavior when using a flexbox. I guess if you want to scroll to the end then you can use position: absolute for the grandchild relative to c1:

.grandchild {
  background-color: red;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
}

给出溢出：隐藏也要 c1 ：

.c1 {
  background-color: blue;
  flex: 1;
  height: 100%;
  position: relative;
  overflow: hidden;
}

干杯！

function startDrag() {
  glass.style = 'display: block;';
  glass.addEventListener('mousemove', drag, false);
}

function endDrag() {
  glass.removeEventListener('mousemove', drag, false);
  glass.style = '';
}

function drag(event) {
  var splitter = getSplitter();
  var panel = document.getElementById('c2');
  var currentWidth = panel.offsetWidth;
  var currentLeft = panel.offsetLeft;
  panel.style.width = (currentWidth - (event.clientX - currentLeft)) + "px";
}

function getSplitter() {
  return document.getElementById('splitter');
}

var con = document.getElementById('container');
var splitter = document.createElement('div');
var glass = document.getElementById('glass');
splitter.className = 'splitter';
splitter.id = 'splitter';
con.insertBefore(splitter, con.lastElementChild);
splitter.addEventListener('mousedown', startDrag, false);
glass.addEventListener('mouseup', endDrag, false);

.container {
  display: flex;
  border: 1px solid;
  width: 500px;
  height: 300px;
  position: absolute;
}

.c1 {
  background-color: blue;
  flex: 1;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.c2 {
  background-color: green;
  width: 150px;
}

.splitter {
  width: 20px;
  cursor: col-resize;
}

.glass {
  height: 100%;
  width: 100%;
  cursor: col-resize;
  display: none;
  position: absolute;
}

.grandchild {
  background-color: red;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
}

<div id="container" class="container">
  <div id="glass" class="glass"></div>
  <div class="c1">
    <div class="grandchild"></div>
  </div>
  <div id="c2" class="c2"></div>
</div>

解决方案：

所以我想您的策略应该是使用绝对孙子填充整个面板，然后将内容放在里面，像这样：

So I guess your strategy should be to use an absolute grandchild that fills the whole side-panel, and then put the content inside like:

<div class="grandchild">
  <div class="content"></div>
</div>

并更改以下样式：

.grandchild {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.grandchild .content{
  background-color: red;
  width: 50px;
  height: 50px;
}

下面的示例：

function startDrag() {
  glass.style = 'display: block;';
  glass.addEventListener('mousemove', drag, false);
}

function endDrag() {
  glass.removeEventListener('mousemove', drag, false);
  glass.style = '';
}

function drag(event) {
  var splitter = getSplitter();
  var panel = document.getElementById('c2');
  var currentWidth = panel.offsetWidth;
  var currentLeft = panel.offsetLeft;
  panel.style.width = (currentWidth - (event.clientX - currentLeft)) + "px";
}

function getSplitter() {
  return document.getElementById('splitter');
}

var con = document.getElementById('container');
var splitter = document.createElement('div');
var glass = document.getElementById('glass');
splitter.className = 'splitter';
splitter.id = 'splitter';
con.insertBefore(splitter, con.lastElementChild);
splitter.addEventListener('mousedown', startDrag, false);
glass.addEventListener('mouseup', endDrag, false);

.container {
  display: flex;
  border: 1px solid;
  width: 500px;
  height: 300px;
  position: absolute;
}

.c1 {
  background-color: blue;
  flex: 1;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.c2 {
  background-color: green;
  width: 150px;
}

.splitter {
  width: 20px;
  cursor: col-resize;
}

.glass {
  height: 100%;
  width: 100%;
  cursor: col-resize;
  display: none;
  position: absolute;
}
.grandchild {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.grandchild .content{
  background-color: red;
  width: 50px;
  height: 50px;
}

<div id="container" class="container">
  <div id="glass" class="glass"></div>
  <div class="c1">
    <div class="grandchild">
      <div class="content"></div>
    </div>
  </div>
  <div id="c2" class="c2"></div>
</div>

这篇关于flexbox中的可拖动拆分窗格窗口无法通过子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！