CSS豎直滾動橫向不滾動是一種常見的網(wǎng)站設(shè)計需求，可用于展示大量內(nèi)容，同時保持頁面整潔美觀。以下是一些實現(xiàn)方法：

/* 方法一：使用overflow-y和overflow-x屬性 */
.container {
width: 100%;
height: 300px;
overflow-y: scroll;
overflow-x: hidden;
}
/* 在這個例子中，.container元素的寬度為100%（與父元素相等），高度為300px，設(shè)置overflow-y屬性為scroll表示允許縱向滾動，而overflow-x屬性為hidden表示不允許橫向滾動。當.container中的內(nèi)容超出高度300px時，會出現(xiàn)縱向滾動條。 */
/* 方法二：使用transform屬性和translateY變換 */
.container {
width: 100%;
height: 300px;
overflow: hidden;
}
.content {
position: relative;
top: 0;
left: 0;
transform: translateY(0);
animation: scroll 10s linear infinite;
}
@keyframes scroll {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}
/* 在這個例子中，.container元素的寬度為100%，高度為300px，設(shè)置overflow屬性為hidden表示不允許滾動條出現(xiàn)。.content元素設(shè)置position為relative相對位置，top和left為0，transform屬性設(shè)置為translateY(0)表示不進行移動，animation屬性設(shè)置為scroll動畫，10s表示10秒完成一次動畫，linear表示線性動畫過渡，infinite表示無限循環(huán)。在@keyframes scroll中，設(shè)置0%時transform為translate(0)，表示不移動，100%時transform為translateY(-100%)，表示向上移動一個元素高度，即實現(xiàn)了滾動效果。