Examples of two ways to implement a horizontal scroll bar

Preface:

During the project development, we encountered a requirement to implement a horizontal scroll bar when there are too many navigation bars on one line. When I started working on the project, the time given was too short and I was in a hurry. I thought there were ready-made ones on the Internet, but when I searched, I found none, so I had to write it myself. In the beginning, I used ordinary CSS+JS to implement the functions. Later, I learned flex layout, so I thought of using flex to implement the horizontal scroll bar. These two methods are recorded for future reference.

text:

Both methods have their own advantages. If you don't consider compatibility issues, you should use flex. After all, I still like the saying: Write Less, Do More. Ha ha

html:

<div class="nav_wrap">
    <ul class="nav_mine">
        <li class="nav_item">All</li>
        <li class="nav_item">Adobe</li>
        <li class="nav_item">Microsoft</li>
        <li class="nav_item">Accounting</li>
        <li class="nav_item">Painting</li>
        <li class="nav_item">Adobe</li>
        <li class="nav_item">Microsoft</li>
        <li class="nav_item">Accounting</li>
        <li class="nav_item">Painting</li>
    </ul>
</div>
<script src="node_modules/jQuery/tmp/jquery.js"></script>

A raw css + jquery to achieve horizontal scroll bar (native js can be achieved, jQuery is used for convenience)

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

$(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 is only the width of the content, the width of the padding needs to be added})

PS: The reason why js is used is because we don’t know how many tabs there are, so the width cannot be hard-coded. We can only dynamically obtain the width of the tabs, and then add them up to get the total width, which is convenient for multiple use. outerWidth plus the parameter true means the width includes padding+margin+border.

2. 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;
}

For white-space, when item does not use white-space:nowrap, I found a problem. When the width is not set, a word will not wrap, but Chinese characters will wrap. I thought it was related to display:flex. After checking online, I found out that white-space looks at the space to identify whether to wrap, and the word is regarded as a character. Therefore, for both Chinese characters and English, white-space:nowrap should be set to prevent line wrap. Because Chinese characters and English characters are different, the widths they occupy are inconsistent, so 1 to 2 pixels should be reserved.

I put the corresponding notes and examples on GitHub, https://github.com/sqh17/notes (local download). If you want to practice, you can clone it.

Summarize

The above is the full content of this article. I hope that the content of this article will have certain reference learning value for your study or work. If you have any questions, you can leave a message to communicate. Thank you for your support for 123WORDPRESS.COM.