css横向滚动条 移动 |css伪类after

/*创建横向滚动条*/
.scroll {
overflow-x:scroll;
white-space:nowrap;
}
/*移动设备*/
@media (max-width: 640px) {
.scroll {
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
overflow-y: scroll;
white-space:normal;
}
}

使用CSS创建一个横向滚动条，大家可以使用overflow-x和white-space两个属性。其中，overflow-x可以让大家控制元素的X轴溢出，white-space可以让大家控制文本的换行。如果大家将white-space设置为nowrap，则文本将不会换行，因此使用横向滚动条成为可能。

最后，为了让横向滚动条在移动设备上完美运行，大家需要添加一个媒体查询(@media)。通过max-width:640px可以检测设备的宽度，从而进行特定的样式设置。在该代码块中，大家添加了-webkit-overflow-scrolling：touch这个属性，它将启用iOS设备上的原生滚动行为，同时开启overflow-y：scroll属性，让文本可以上下滚动。

有了这个CSS横向滚动条代码，让用户可以轻松浏览网页中的大量内容，同时也能确保移动设备上完美运行。