兩種方式實現橫向滾動條

番茄西紅柿發布于2019-04-23 13:34 / 812人閱讀

摘要：前言在項目開發中，遇到了一個需求，實現一行上的導航欄過多使其產生橫向滾動條。因為漢字和英文的不同，導致所占的寬度不一致，所以要留到個像素。

　　前言：

　　在項目開發中，遇到了一個需求，實現一行上的導航欄過多使其產生橫向滾動條。一開始做項目，給的時間太短又著急，覺得網上有現成的，去搜發現沒有，只好自己去寫，一開始用的是平常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">Adobeli>
        <li class="nav_item">微軟li>
        <li class="nav_item">會計li>
        <li class="nav_item">繪畫li>
        <li class="nav_item">Adobeli>
        <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下來。

　　有什么問題請私信或留下評論，一起加油。

云服務器 GPU云服務器滾動條html實現橫向進度條 listview橫向滾動 jsp橫向導航條

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2054.html

今天，你的瀏覽器 “滾動” 了嗎？

摘要：今天，你的瀏覽器滾動了嗎序在頁面中，一個有高度或者寬度的容器是最常見的構成元素，而在其中的子元素有很大的概率超過父容器的尺寸限制，我們稱之為溢出。今天，你的瀏覽器滾動了嗎？序在 Web 頁面中，一個有高度或者寬度的容器是最常見的構成元素，而在其中的子元素有很大的概率超過父容器的尺寸限制，我們稱之為溢出。而應對溢出，隱藏或者滾動是最常見的處理方式。滾動，作為 FEers 最經常...

leo108 2019-08-21 11:51 評論0 收藏0
今天，你的瀏覽器 “滾動” 了嗎？

摘要：今天，你的瀏覽器滾動了嗎序在頁面中，一個有高度或者寬度的容器是最常見的構成元素，而在其中的子元素有很大的概率超過父容器的尺寸限制，我們稱之為溢出。今天，你的瀏覽器滾動了嗎？序在 Web 頁面中，一個有高度或者寬度的容器是最常見的構成元素，而在其中的子元素有很大的概率超過父容器的尺寸限制，我們稱之為溢出。而應對溢出，隱藏或者滾動是最常見的處理方式。滾動，作為 FEers 最經常...

ad6623 2019-08-29 13:09 評論0 收藏0
微信小程序scroll-view橫向滾動的實踐踩坑及隱藏其滾動條的實現

摘要：此時正確姿勢如下變成這樣子不讓它換行到這里，就基本如我所愿了，大概長這樣二隱藏滾動條在網上搜了很多，都是說加上這段代碼就可以隱藏滾動條或者有的人說這樣子隱藏滾動條然而兩種方法我都試過，的滾動條依然存在。。一、實踐踩坑項目使用mpvue開發 1. scroll-view默認是不滾動的。。所以要先設置scroll-x=true或者scroll-y=true showImg(https...

wemall 2019-08-26 13:37 評論0 收藏0
vueTable大數據展示優化

摘要：懶加載方式常見的有淘寶一屏用元素占據一定的高度，然后再去拉圖片數據。但這種方式還是需要元素占位，淘寶一頁的數據量其實不算大，因為它結合了分頁。背景 showImg(https://segmentfault.com/img/bVbhSVh?w=1606&h=440);大數據項目根據用戶輸入代碼查詢數據，用戶的代碼不可控（比如select from db limit 5000），有可能...

JasinYip 2019-08-23 12:15 評論0 收藏0
解決div出現橫向滾動條，背景色沒鋪滿問題

摘要：如圖，初始情況，點擊菜單后出現的文字長度超出原寬度，出現了滾動條注意設置才會出現滾動條，如果設成超出的文字會被隱藏，向右拉滾動條發現背景沒鋪滿解決方式給最外層加樣式說明注意是而不是，不然會出現其它錯誤。問題描述（如圖）：div等塊級元素默認寬度為100%，當頁面渲染完后其寬度已經固定，這時候如果文字超出其寬度（如調用api后顯示的結果），我們如果希望其出現滾動條，這時超過原寬度的部分...

XBaron 2019-08-30 14:13 評論0 收藏0