我在另一个div中有两个div元素,每个元素都显示为一个块。因此,div1最终位于div2之上。
我想添加一种“条”的形式,用户可以点击和拖动,这将结束调整div2的大小,div1将自动调整大小相同的数量。
div1和div2的父类有style:display:flex;flex-direction:column;
,div1有flex-grow:1
,因此可以自动调整大小。
我希望调整条的大小如下所示:
我怎么添加这样的东西呢?另外,有没有什么方法可以在CSS中改变它的外观?
发布于 2019-04-08 09:20:25
在您的列flexbox中,您可以在其中一个div上使用,并使用flex-grow
设置为1来自动调整另一个- downside是滑块不是很容易定制:
resize: vertical
to the flex itemsflex: 1
to the other flex item (以便此flex项目会在调整大小时自动调整其他flex项目的高度)
body {
margin: 0;
}
.outer {
display: flex;
flex-direction: column;
height: 100vh;
}
.block {
height: 50%;
}
.block-1 {
background-color: red;
resize: vertical; /* resize vertical */
overflow: auto; /* resize works for overflow other than visible */
}
.block-2 {
background-color: green;
flex: 1; /* adjust automatically */
}
<div class="outer">
<div class="block block-1">
Block 1
</div>
<div class="block block-2">
Block 2
</div>
</div>
解决方案
相反,您可以使用mousedown
侦听器来注册更新block-1
高度(并重置mouseup
事件)的mousemove
侦听器-请参阅下面的演示:
let block = document.querySelector(".block-1"),
slider = document.querySelector(".slider");
// on mouse down (drag start)
slider.onmousedown = function dragMouseDown(e) {
// get position of mouse
let dragX = e.clientY;
// register a mouse move listener if mouse is down
document.onmousemove = function onMouseMove(e) {
// e.clientY will be the position of the mouse as it has moved a bit now
// offsetHeight is the height of the block-1
block.style.height = block.offsetHeight + e.clientY - dragX + "px";
// update variable - till this pos, mouse movement has been handled
dragX = e.clientY;
}
// remove mouse-move listener on mouse-up (drag is finished now)
document.onmouseup = () => document.onmousemove = document.onmouseup = null;
}
body {
margin: 0;
}
.outer {
display: flex;
flex-direction: column;
height: 100vh;
}
.block {
height: 50%;
}
.block-1 {
background-color: red;
resize: vertical; /* resize vertical */
overflow: auto; /* resize works for overflow other than visible */
}
.block-2 {
background-color: green;
flex: 1; /* adjust automatically */
min-height: 0;
overflow: hidden; /* hide overflow on small width */
}
.slider {
text-align: center;
letter-spacing: 10px;
background-color: #dee2e6;
cursor: row-resize;
user-select: none; /* disable selection */
}
<div class="outer">
<div class="block block-1">
Block 1
</div>
<div class="slider">slider</div>
<div class="block block-2">
Block 2
</div>
</div>
https://stackoverflow.com/questions/55565001
复制相似问题