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是為了使頁面有足夠的高度來演示滾動效果。
當頁面滾動時,左側元素會一直保持在左側不變,右側元素則可以自由滑動。
這種左側凍結滑動的效果在制作管理后臺、固定菜單等場景中非常實用,可以提高頁面的易用性和用戶體驗。
下一篇css左側二級導航欄