CSS的作用是给 HTML 元素添加样式和布局，接下来利用CSS的 white-space 和 overflow 这两个属性让元素实现左右滑动，效果如下： 左右滑动的菜单.gif 点击按钮 day4-前端 菜单会滚动到中间，在iOS中想要实现这种效果还是比较简单的，接下来看看在前端中实现这种效果的要点有哪些？ 一、所有的菜单项单行显示，不换行 前端的默认布局方式是 流式布局 ，块级元素 在流式布局中独占一行，块级元素会自上而下的排列且在默认宽度是父类元素的100%而高度默认被内容撑开，例如 div。内联元素 在流式布局中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右，例如 span。 我们要的是单行显示，所以使用 span 标签就能实现我们要的效果，但是还要 不换行，这时就要利用 CSS 的 white-space 属性了，它会告诉浏览器遇到 空格 该怎么处理（这里的空格不是单纯意义上的空格）。它的默认值是 nomal ，就是遇到空格字符就会折叠，而另外一个属性 nowrap 恰好与它相反，意思是不折叠一直显示，刚好满足我们的需求。 二、菜单可以左右滑动 CSS 中有一个属性 overflow 可以控制对于超出可视区域的内容如何处理。从下面的注释可以知道我们要选择 scroll ，上下左右滑动可以通过 overflow-x 和 overflow-y 分别控制各个方向的具体表现。 /* 默认值。内容不会被修剪，会呈现在元素框之外 */ overflow: visible; /* 内容会被修剪，并且其余内容不可见 */ overflow: hidden; /* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */ overflow: scroll; /* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */ overflow: auto; /* 规定从父元素继承overflow属性的值 */ overflow: inherit; 五、点击按钮，让某个菜单滚动到中间 其实就是一个方法 Element.scrollTo() ，可以使界面滚动到给定元素的指定坐标位置。 源码如下： day6.html

前端小课

day6.css /*清除标签默认边距*/ * { margin: 0; padding: 0; } /* class 的选择器，以 . 开头获取 */ .topTitle { text-align: center; margin: 10px auto; } .line { background-color: lightgray; height: 2px; margin-bottom: 2px; } #navigation { /* 不折叠一直显示 */ white-space: nowrap; /* CSS 有一个属性 overflow，它可以控制对于超出可视区域的内容如何处理 */ /* x轴可以滚动 */ overflow-x: scroll; /* y轴内容超出隐藏 */ overflow-y: hidden; /* height: 44px; */ background: green; color: white; } /* 伪选择器 */ div > span { font-size: 20px; margin-right: 20px; line-height: 40px; } /* div 下的第一个元素 */ div :first-child { margin-left: 15px; } /* div 下的最后一个元素 */ div :last-child { margin-right: 15px; } #button { height: 40px; color: white; text-align: center; background-color: blue; width: 200px; margin: 100px auto; border-radius: 4px; line-height: 40px; } #d { color: red; } day6.js function clickedScroll() { let getEle = document.getElementById('d'); if (getEle) { let navigation = document.getElementById('navigation'); if (navigation) { let wid = navigation.clientWidth / 2.0 - getEle.clientWidth / 2.0 - 15; navigation.scrollTo(wid, 0); } } } 完整源码如下： Github 参考： 第 6 天：设计一个左右滑动的菜单 web常见的五种前端布局方式

本文章由javascript技术分享原创和收集