CSS+固定左右滑動

CSS實現固定左右滑動
CSS中設置固定左右滑動效果需要用到overflow、position、left、right等屬性。
首先，可以通過overflow-y:hidden來隱藏Y軸滾動條，overflow-x:scroll的寬度超出容器寬度時出現橫向滾動條。同時使用position:relative設置相對定位。
overflow:auto簡單理解就是容器始終顯示 Y 軸滾動條，如果容器高度不足以顯示內容，則會出現Y軸滾動條，如果沒有超出，則不會出現 Y 軸滾動條（即不占用滾動條的位置），橫向同理。
示例代碼如下：
.container{
overflow-x:scroll;/* 橫向滑動條 */
overflow-y:hidden;/* 不顯示縱向滑動條 */
white-space:nowrap;/* 此處要把子元素的 display 設置為 inline-block， 但不要換行 */
position:relative;/* 相對定位 */
}
.child{
display:inline-block;/* 當作一個行內塊元素 */
}
固定左右滑動應用場景
固定左右滑動應用場景很多，特別是在一些需要展示大量圖片或內容的網站中，可以使用固定左右滑動來分區域展示，達到更好的展示效果。
例如，電商網站中的商品推薦區域、美食網站的精品推薦區域、影視網站中的熱門電影區域等。