使用qq的时候发现了左侧可以调节大小,效果如下,于是自己手动实现了一个类似的小demo
首先是html结构,主要有两部分,左侧侧边栏和右边主内容区域。
flexible是左侧侧边栏,main为右边主内容区域,bar表示拖动条
<div class="container">
<div class="flexible">
<div class="content">
<img src="http://img1.imgtn.bdimg.com/it/u=1326427068,125180539&fm=11&gp=0.jpg" alt="">
</div>
<div class="bar">
<div class="sign"></div>
</div>
</div>
<div class="main">
这里是主要内容区域
</div>
</div>
接下来是css样式,主要使用flex布局
html,
body {
padding: 0;
margin: 0;
user-select: none;
}
.container {
display: flex;
height: 100vh;
}
.flexible {
width: 15vw;
height: 100%;
min-width: 50px;
position: relative;
padding-right: 17px;
}
.flexible .content {
padding: 20px;
}
.flexible .content img {
display: block;
max-width: 100%;
margin: auto;
border-radius: 50%;
}
.flexible .bar {
width: 17px;
height: 100%;
position: absolute;
right: 0;
top: 0;
cursor: col-resize;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.flexible .bar .sign {
width: 3px;
height: 15px;
border-left: 1px solid rgba(0, 0, 0, 0.5);
border-right: 1px solid rgba(0, 0, 0, 0.5);
}
.main {
flex: 1;
height: 100%;
padding: 20px;
background-color: antiquewhite;
}
使用js控制侧边栏高度,需要对mousedown、mousemove和mouseup事件进行监听,其中mousedown在bar中监听,mousemove和mouseup在最外层元素进行监听,这样在页面的任何位置滑动都能响应。当鼠标按下的时候,记录鼠标的初始横坐标和侧边栏的初始宽度,当鼠标滑动时,计算与上一次相差的距离,然后重新设置侧边栏的宽度即可。
这里只是简单实现了效果,可以使用节流函数对mousemove进行优化
const flexible = document.querySelector(".flexible");
const bar = document.querySelector(".flexible .bar");
let startX, startWidth;
bar.addEventListener("mousedown", start);
function start(e) {
startX = e.clientX;
startWidth = parseInt(getComputedStyle(flexible, null).width);
document.documentElement.addEventListener("mousemove", move);
document.documentElement.addEventListener("mouseup", end);
}
function move(e) {
flexible.style.width = `${startWidth + e.clientX - startX}px`;
}
function end(e) {
document.documentElement.removeEventListener("mousemove", move);
document.documentElement.removeEventListener("mouseup", end);
}
最终效果