2023年7月16日发(作者：)

在h5中运⽤简单的css达到⽔平滚动的效果当我们在浏览器上要达到⼀块区域的⽔平或垂直能够滚动，有很多种通过不同的语⾔实现的⽅式，接下来介绍的就是其中最简单的⼀种，通过h5和css样式实现⽔平⽅向的滚动，⽽这种⽅式除了使⽤⼤家常⽤的浮动、⾏块转换之外必不可少的就是使⽤css的overflow属性。浮动:float属性，属性值常⽤的有left，right（注:浮动属性在使⽤后，⼀定要清除掉，否则会对后⾯的布局造成影响）⾏块转换:display属性，属性值常⽤的有:inline，block，inline-block（将元素转换为⾏内元素，将元素转换为块级元素，将元素转换位⾏内块级元素）overfow属性:浏览器⽀持:所有主流浏览器都⽀持 overflow 属性。注：任何的版本的 Internet Explorer （包括 IE8）都不⽀持属性值 "inherit"。定义和⽤法:overflow 属性规定当内容溢出元素框时发⽣的事情。以下是其值和官⽅的描述:值visiblehiddenscrollautoinherit描述默认值。内容不会被修剪，会呈现在元素框之外。内容会被修剪，并且其余内容是不可见的。内容会被修剪，但是浏览器会显⽰滚动条以便查看其余的内容。如果内容被修剪，则浏览器会显⽰滚动条以便查看其余的内容。规定应该从⽗元素继承 overflow 属性的值。接下来给⼤家展⽰的是⼀个我的⼩demo，⼤家可以把li标签下的图⽚换成⾃定义的内容，就可以实现⽔平滚动的效果了h5代码:

css代码:#category-head{ width:100%; display: inline; white-space: nowrap;/*规定段落中的⽂本不进⾏换⾏*/ overflow-x:scroll;/*⽔平⽅向，超出部分添加滚动机制*/ float:left;/*⼀定要设置左侧浮动*/ overflow-y:hidden/*竖直⽅向，超出部分隐藏*/}#category-head li{ margin-top: 10px; display:inline-block;/*既可以⽔平排列，⼜可以设置宽⾼和边距*/}