使用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);
}
最終效果