实现横向滚动条的2种方法示例

    前言:

    在项目开发中,遇到了一个需求,实现一行上的导航栏过多使其产生横向滚动条。一开始做项目,给的时间太短又着急,觉得网上有现成的,去搜发现没有,只好自己去写,一开始用的是平常css+js实现功能,之后学习了flex布局,所以又想到了用flex实现横向滚动条。两种方法,记录下来,供以后借鉴。

    正文:

    两种方法各有各的好处,如果不考虑兼容性问题,还是用flex吧,毕竟还是喜欢那一句话:Write Less,Do More。哈哈

    html:

    
    <div class="nav_wrap">
        <ul class="nav_mine">
            <li class="nav_item">全部</li>
            <li class="nav_item">Adobe</li>
            <li class="nav_item">微软</li>
            <li class="nav_item">会计</li>
            <li class="nav_item">绘画</li>
            <li class="nav_item">Adobe</li>
            <li class="nav_item">微软</li>
            <li class="nav_item">会计</li>
            <li class="nav_item">绘画</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个像素。

    对应的笔记和实例,我放到了GitHub,https://github.com/sqh17/notes  (本地下载) 如果想实践可以去clone下来。

    总结

    以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对lingkb的支持。

发表评论

发表评论