CSS自動滾動到最底部是一個常見的需求,當網頁有大量文本并且需要自動向下滾動時,就可以使用CSS來實現這個功能。下面介紹兩種CSS的實現方法。
方法一:使用CSS動畫
.scroll { animation: scrollDown 10s ease 0s infinite normal forwards; overflow: hidden; height: 200px; // 控制可視區域的高度 } @keyframes scrollDown { 0% { transform: translateY(0); } 100% { transform: translateY(calc(-100% + 200px)); // 控制滾動的速率和停止位置 } }
方法二:使用CSS3的scroll-behavior屬性
.scroll { overflow-y: scroll; // 控制垂直滾動條的顯示和隱藏 height: 200px; // 控制可視區域的高度 scroll-behavior: smooth; // 控制滾動的速率和平滑度 }
注意事項:
1. 第一種方法需要設置一個固定的高度,所以并不適用于高度不固定的元素。
2. 第二種方法需要讓元素的overflow屬性設置為scroll或auto,否則不起作用。
3. 控制滾動速率和停止位置的代碼需要根據實際情況做調整,以達到最佳效果。
上一篇css自動滾動效果圖
下一篇css自動滑出菜單欄