导航栏横向滚动条的两种实现方法

码农公社  210.net.cn   210是何含义?10月24日是程序员节,1024 = 210、210既 210 之意。

实现导航栏上的横向滚动条以显示更多的栏目项。

有两种实现方式:css+js实现、flex实现。

两种方法各有所长,如果不考虑兼容性问题,还是用flex吧,毕竟:Write Less,Do More。

html:

<div class="nav_wrap">    

     <ul class="nav_mine">         

        <li class="nav_item">ue.cx</li>         

        <li class="nav_item">210.net.cn</li>         

        <li class="nav_item">210.cx</li>         

        <li class="nav_item">210.mn</li>         

        <li class="nav_item">177.xyz</li>         

        <li class="nav_item">168.cx</li>         

        <li class="nav_item">167.la</li>         

        <li class="nav_item">hengxing.net</li>         

        <li class="nav_item">wangzhi.info</li>     

    </ul> 

</div> 

<script src="node_modules/jQuery/tmp/jquery.js"></script>


一 原始css + jquery 实现横向滚动条(原生js可以实现,为了方便才用的jQuery)

css:


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}
.nav_wrap{
    overflow-x: scroll;
}
.nav_mine {
    padding: 15px 10px;
    border-bottom: 1px solid #aca9a7;
    height: 75px;
    overflow-x: scroll;
    overflow-y: hidden;
}
 
.nav_mine .nav_item {
    border: 1px solid #1a110b;
    border-radius: 40px;
    color: #aca9a7;
    margin-right: 10px;
    font-size: 24px;
    padding: 4px 18px;
    float: left;
    list-style: none;
}


js代码:


$(function(){
    var width = 0;
    for (let i = 0; i < $('.nav_item').length; i++) {
        width += $('.nav_item').eq(i).outerWidth(true);
    }
    $('.nav_mine').width(width+20);  //width只是内容的宽度,需要加上padding的宽度
})


PS:为什么用js,是因为不知道tabs有多少个,不能把宽度写死,只能动态获取tabs的宽度,然后相加,获取总宽度,方便多次使用。outerWidth加上参数true,代表包含了padding+margin+border的宽度。


二 、css3  --  flex

css:

* {
    box-sizing: border-box;
}
 
.nav_mine {
    padding: 15px 20px;
    border-bottom: 1px solid #aca9a7;
    height: 75px;
    display: flex;
    align-items: center;
    overflow-y: hidden;
    flex-wrap: nowrap;
}
 
.nav_mine .nav_item {
    border: 1px solid #aca9a7;
    border-radius: 40px;
    color: #aca9a7;
    margin-right: 22px;
    font-size: 24px;
    padding: 4px 18px;
    list-style: none;
    white-space: nowrap;
}


对于white-space,item在没有用white-space:nowrap时,发现一个问题,在未设定宽度的情况下,一个单词不会换行,而汉字会换行,认为是和display:flex有关系。

上网查阅,才知道:white-space是看空格来识别是否换行的,单词是作为一个字符,所以要针对于汉字和英文,都要设置white-space:nowrap不换行。因为汉字和英文的不同,导致所占的宽度不一致,所以要留1到2个像素。

评论