CSS是網(wǎng)站開發(fā)中常用的樣式表語言，用于美化和控制網(wǎng)頁布局。在網(wǎng)站開發(fā)中，我們經(jīng)常會(huì)遇到需要支持手機(jī)滑動(dòng)的需求，但有時(shí)候我們發(fā)現(xiàn)用CSS設(shè)置滑動(dòng)卻沒有效果，這是為什么呢？

首先，我們需要了解CSS中的overflow屬性。該屬性用于控制元素中內(nèi)容的溢出部分的處理方式。其中，overflow-x屬性控制元素水平方向上的溢出，而overflow-y屬性控制元素垂直方向上的溢出。overflow屬性可設(shè)置為hidden、scroll、auto、visible等值，其中scroll是我們用來實(shí)現(xiàn)手機(jī)滑動(dòng)效果的關(guān)鍵。

/* 設(shè)置滑動(dòng)效果 */
.container {
overflow-x: scroll; /* 水平方向滑動(dòng) */
overflow-y: hidden; /* 防止出現(xiàn)不必要的豎直滑動(dòng)條 */
-webkit-overflow-scrolling: touch; /* 兼容 iOS 系統(tǒng) */
}

上面的代碼設(shè)置了一個(gè)包含內(nèi)容的容器元素，我們將其水平方向上設(shè)為scroll，這樣當(dāng)內(nèi)容超過容器寬度時(shí)，就可以出現(xiàn)水平滾動(dòng)條，從而實(shí)現(xiàn)手機(jī)滑動(dòng)效果。同時(shí)，為了兼容iOS系統(tǒng)，建議加上-webkit-overflow-scrolling: touch;。

但有時(shí)候，我們可能會(huì)發(fā)現(xiàn)上面的代碼在某些手機(jī)上并不能實(shí)現(xiàn)滑動(dòng)效果。為什么？其實(shí)原因在于該容器元素的子元素沒有充滿其寬度，導(dǎo)致容器元素并不能被滑動(dòng)。為了解決這個(gè)問題，我們可以嘗試在容器元素中加入一個(gè)flex布局，以充分利用容器元素的寬度。

/* 使用flex box充分利用容器的寬度 */
.container {
display: flex;
flex-flow: row nowrap; /* 禁用換行 */
}
/* 子元素 */
.container .item {
flex: 1; /* 均分寬度 */
height: 100px;
background-color: #ccc;
}

上面的代碼使用了flex布局，通過將容器元素的display屬性設(shè)為flex，子元素就可以自適應(yīng)寬度，從而充滿整個(gè)容器元素。這樣一來，就可以成功實(shí)現(xiàn)輕松滑動(dòng)的效果了。