實(shí)現(xiàn)橫向滾動(dòng)條的2種方法示例

前言:
在項(xiàng)目開發(fā)中,遇到了一個(gè)需求,實(shí)現(xiàn)一行上的導(dǎo)航欄過(guò)多使其產(chǎn)生橫向滾動(dòng)條。一開始做項(xiàng)目,給的時(shí)間太短又著急,覺得網(wǎng)上有現(xiàn)成的,去搜發(fā)現(xiàn)沒有,只好自己去寫,一開始用的是平常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">繪畫</li> <li class="nav_item">Adobe</li> <li class="nav_item">微軟</li> <li class="nav_item">會(huì)計(jì)</li> <li class="nav_item">繪畫</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è),不能把寬度寫死,只能動(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在沒有用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ì)腳本之家的支持。
相關(guān)文章
jQuery可自定義滾動(dòng)條的產(chǎn)品圖片橫向滾動(dòng)源碼
這是一款效果非常棒的jQuery圖片滾動(dòng)插件源碼,這款jQuery插件有以下特點(diǎn):1.可以設(shè)置任意數(shù)量的圖片;2.點(diǎn)擊圖片即可將當(dāng)前圖片激活放大;3.可以點(diǎn)擊左右的箭頭來(lái)進(jìn)行圖片2014-08-05一款js實(shí)現(xiàn)的圖片橫向自定義滾動(dòng)條效果
一款js實(shí)現(xiàn)的圖片橫向自定義滾動(dòng)條效果,兼容目前主要瀏覽器2014-06-24通過(guò)jQuery實(shí)現(xiàn)的不用點(diǎn)擊隨鼠標(biāo)自動(dòng)滾動(dòng)的橫向滾動(dòng)條效果
可以通過(guò)鼠標(biāo)拖動(dòng)滾動(dòng)條來(lái)滾動(dòng)圖片,也可以直接把鼠標(biāo)放置到滾動(dòng)條兩端,不用點(diǎn)擊,圖片自動(dòng)滾動(dòng)2013-08-20jQuery自定義風(fēng)格各異的橫向或縱向內(nèi)容滾動(dòng)條效果
可以在網(wǎng)頁(yè)中任何地方定義多種風(fēng)格的帶滾動(dòng)條的內(nèi)容區(qū),滾動(dòng)條可以橫向也可以縱向2013-07-10textarea去掉滾動(dòng)條 textarea橫向或縱向滾動(dòng)條的去掉方法
有些新手朋友可能對(duì)去掉textarea橫向或縱向滾動(dòng)條不是很擅長(zhǎng),本文將詳細(xì)介紹,需要了解的朋友可以參考下2012-12-06- IE一向是有豎向滾動(dòng)條區(qū)域的,無(wú)論頁(yè)面是否超過(guò)一屏,這回到了IE8竟然不是了。。。2010-12-27
iframe在IE6下出現(xiàn)橫向滾動(dòng)條的解決方案
最近的項(xiàng)目中,遇到ie6下當(dāng)iframe出現(xiàn)縱向滾動(dòng)條時(shí)同時(shí)會(huì)出現(xiàn)橫向滾動(dòng)條。分析了代碼,大致的原因是iframe中的頁(yè)面有相對(duì)body的樣式包含width:100%的元素。2010-01-10