CSS鼠標滑動 仿滾動

html {
scroll-behavior: smooth;
}
.container {
height: 300px;
overflow: auto;
}
.card {
background-color: #fff;
padding: 20px;
margin-bottom: 20px;
}
.card:hover {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

CSS中的scroll-behavior屬性可以實現滾動平滑過渡，這樣當鼠標滑動時頁面會自動平滑滾動。

在以上代碼中，我們將scroll-behavior屬性應用在html元素上，這樣整個頁面都可以有平滑的滾動效果。

我們還應用了一個.container元素，并將其中的內容高度設為300px，并設置overflow: auto，這樣當內容溢出元素的高度時會顯示滾動條。

每個卡片都是一個.card元素，它們有一個白色背景、20px的padding內邊距和20px的下外邊距。當鼠標懸停時，卡片會被陰影包圍。

通過這些CSS屬性，我們達到了一個類似于鼠標滾輪滑動的滾動效果，并且增加了一些卡片的效果來吸引用戶的注意力。