gpt4 book ai didi

javascript - Flexbox 中的可拖动拆分 Pane 窗口无法通过子元素

转载 作者:太空狗 更新时间:2023-10-29 15:59:19 27 4
gpt4 key购买 nike

<分区>

我用 HTML/JS/CSS Flexbox 实现了我自己的拆分面板。

在以下情况下,我遇到了拆分器的问题 - 其中一个面板具有固定大小(以 px 为单位),另一个面板设置为增长(flex-grow: 1 ).

如果另一个面板有大小的 child ,它不会滚动到最后。它卡在 child 的大小上。

这可以在拆分面板上使用 CSS 修复,但不能在子面板上修复吗?

使用 flex 对我来说非常重要,因为我想保持应用程序的响应能力,并希望尽可能避免固定大小。

这是一个 JSFiddle sample我的问题。

代码片段如下。谢谢!

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>

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com