色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

Css左側凍結滑動

劉姿婷2年前10瀏覽0評論

CSS中的左側凍結滑動是一個非常實用的功能,它可以讓頁面左側的元素在滾動時保持固定不動,而右側的內容則可以繼續滑動。

下面是一個使用CSS實現左側凍結滑動的示例代碼:

<style>
.wrapper {
display: flex;
}
.left {
position: sticky;
left: 0;
width: 200px;
height: 100vh;
background-color: #ccc;
}
.right {
flex: 1;
height: 2000px;
background-color: #fff;
}
</style>
<div class="wrapper">
<div class="left">
左側固定內容
</div>
<div class="right">
右側滑動內容
</div>
</div>

在上面的代碼中,我們使用了flex布局來實現左右兩個元素的排列。左側元素的position屬性設置為sticky,意味著它會在滾動到一定距離時固定在左側不動,left屬性則表示它相對于左側的邊框距離為0,width屬性表示它的寬度為200px。右側元素則通過flex:1來占據剩余的寬度,height屬性設置為2000px是為了使頁面有足夠的高度來演示滾動效果。

當頁面滾動時,左側元素會一直保持在左側不變,右側元素則可以自由滑動。

這種左側凍結滑動的效果在制作管理后臺、固定菜單等場景中非常實用,可以提高頁面的易用性和用戶體驗。