【前端实例】自适应水平滑动导航条

【提出需求】

当屏幕小于内容显示的宽度时，用户可以通过左右滑动导航条来浏览被隐藏的内容。

【解决问题】

1、判断内容是否被隐藏

     答：解决方式分为CSS和JS，前者最简单后者相对麻烦，后者因为需要获取当前容器距离左侧的像素再加上本身的宽度，再和浏览器的浏览宽度进行比较，如果大于则说明多余的内容被隐藏了。

2、解决CSS样式overflow隐藏多余内容后水平滚动条的问题

     答：水平滚动条并不占用当前容器的高度，所以outer容器不需要像垂直那样多15~17px

3、解决水平排列问题

     答：水平排列可以使用浮动或者更改块样式为内联块元素，但是两者都会面临一个问题，那就是占不下的元素会换行，所以我们还需要使用white-space样式定义容器内的元素排布方式，通过nowrap属性使其子元素无法换行。但是这个方法并不适用浮动，因为使用float样式的元素已经脱离文档流了，所以white-space自然无法使用。

【具体效果】

【代码展示】

【CSS代码】
.outer{
	height: 40px;
    overflow: hidden;
}.inner{
    white-space: nowrap;
    overflow-x: scroll;
}.navList{
    display: inline-block;
    background-color: #3F3F3F;
    color: white;
    text-align: center;
    line-height: 40px;
    width: 100px;
}

【HTML代码】
<div class="outer">
    <div class="inner">
        <div class="navList">1</div>
        <div class="navList">2</div>
        <div class="navList">3</div>
        <div class="navList">4</div>
        <div class="navList">5</div>
        <div class="navList">6</div>
        <div class="navList">7</div>
        <div class="navList">8</div>
        <div class="navList">9</div>
    </div>
</div>

【其他实例】

1、垂直滑动导航条

2、jQuery超简单实现返回顶部滑动效果