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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./day6.js"></script>
<link rel="stylesheet" href="day6.css">
<title>利用CSS让元素可以左右滑动</title>
</head>
<body>
<h1 class="topTitle">前端小课</h1>
<div class="line"></div>
<div id="navigation">
<span id="a">day1-前端</span>
<span id="b">day2-前端</span>
<span id="c">day3-前端</span>
<span id="d">day4-前端</span>
<span id="e">day5-前端</span>
<span id="f">day6-前端</span>
</div>
<!-- 点击事件 -->
<div id="button" onclick="clickedScroll()">点击滚动菜单</div>
</body>
</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
