Two ways to implement horizontal scroll bars in CSS (code examples)

This chapter will introduce you to two ways to implement horizontal scroll bars using CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

html code:

<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>

1. Original css jquery to implement horizontal scroll bar (native js can be implemented, jQuery is used for convenience)

css code:

* {
    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 code:

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

PS: Why use js? It’s because I don’t know how many tabs there are, and the width cannot be hard-coded, it can only be dynamic Get the width of tabs, and then add them together to get the total width, which is convenient for multiple uses. outerWidth plus parameter true represents the width including padding margin border.

二css3 -- flex

css code:

* {
    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;
}

For white-space, item does not use white- When using space:nowrap, I found a problem. When the width is not set, a word will not wrap, but the Chinese character will wrap. I think it is related to display:flex. I checked online and found out: white-space is based on spaces. To identify whether to wrap or not, a word is treated as a character, so for both Chinese characters and English, white-space:nowrap must be set to not wrap. Because the differences between Chinese characters and English characters lead to inconsistent widths, 1 to 2 pixels should be left.

The above is the detailed content of Two ways to implement horizontal scroll bars in CSS (code examples). For more information, please follow other related articles on the PHP Chinese website!