前言：
在項(xiàng)目開(kāi)發(fā)中，遇到了一個(gè)需求，實(shí)現(xiàn)一行上的導(dǎo)航欄過(guò)多使其產(chǎn)生橫向滾動(dòng)條。一開(kāi)始做項(xiàng)目，給的時(shí)間太短又著急，覺(jué)得網(wǎng)上有現(xiàn)成的，去搜發(fā)現(xiàn)沒(méi)有，只好自己去寫(xiě)，一開(kāi)始用的是平常css+js實(shí)現(xiàn)功能，之后學(xué)習(xí)了flex布局，所以又想到了用flex實(shí)現(xiàn)橫向滾動(dòng)條。兩種方法，記錄下來(lái)，供以后借鑒。
正文：
兩種方法各有各的好處，如果不考慮兼容性問(wèn)題，還是用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">會(huì)計(jì)</li> <li class="nav_item">繪畫(huà)</li> <li class="nav_item">Adobe</li> <li class="nav_item">微軟</li> <li class="nav_item">會(huì)計(jì)</li> <li class="nav_item">繪畫(huà)</li> </ul></div><script src="node_modules/jQuery/tmp/jquery.js"></script>
一 原始css + jquery 實(shí)現(xiàn)橫向滾動(dòng)條（原生js可以實(shí)現(xiàn)，為了方便才用的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只是內(nèi)容的寬度，需要加上padding的寬度})PS：為什么用js，是因?yàn)椴恢纓abs有多少個(gè)，不能把寬度寫(xiě)死，只能動(dòng)態(tài)獲取tabs的寬度，然后相加，獲取總寬度，方便多次使用。outerWidth加上參數(shù)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;}對(duì)于white-space，item在沒(méi)有用white-space:nowrap時(shí)，發(fā)現(xiàn)一個(gè)問(wèn)題，在未設(shè)定寬度的情況下，一個(gè)單詞不會(huì)換行，而漢字會(huì)換行，認(rèn)為是和display:flex有關(guān)系，上網(wǎng)查閱，才知道：white-space是看空格來(lái)識(shí)別是否換行的，單詞是作為一個(gè)字符，所以要針對(duì)于漢字和英文，都要設(shè)置white-space:nowrap不換行。因?yàn)闈h字和英文的不同，導(dǎo)致所占的寬度不一致，所以要留1到2個(gè)像素。
對(duì)應(yīng)的筆記和實(shí)例，我放到了GitHub，https://github.com/sqh17/notes （本地下載） 如果想實(shí)踐可以去clone下來(lái)。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
圖片精選
