CSS窗口上下滑動指的是在網頁中使用CSS樣式來實現頁面元素上下滑動的效果。這種效果可以用來展示類似于輪播圖、卡片瀑布流等頁面效果。
html, body { height: 100%; overflow: hidden; } .container { position: relative; height: 100%; width: 100%; overflow: hidden; } .wrapper { position: absolute; top: 0; bottom: 0; width: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; } .card { height: 200px; width: 100%; margin-bottom: 10px; background-color: #fff; }
上述CSS代碼中,我們首先設置了html和body的高度為100%并禁用了溢出。接下來定義了一個.container容器來放置我們的頁面元素,將其位置設置為相對,高度和寬度為100%。最關鍵的是我們設置了.container下的.wrapper元素具有絕對定位,高度占滿.container容器,并且可以上下滑動,同時激活了移動端的平滑滾動效果。
最后,我們將每個被包裹在.wrapper里的.card元素都設置了一個高度和背景顏色,這樣就可以在頁面上看到一排卡片狀的元素,且所有元素可以在.wrapper容器中上下滑動。