實現(xiàn)橫向滾動條的2種方法示例

前言:
在項目開發(fā)中,遇到了一個需求,實現(xiàn)一行上的導航欄過多使其產(chǎn)生橫向滾動條。一開始做項目,給的時間太短又著急,覺得網(wǎng)上有現(xiàn)成的,去搜發(fā)現(xiàn)沒有,只好自己去寫,一開始用的是平常css+js實現(xiàn)功能,之后學習了flex布局,所以又想到了用flex實現(xià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">會計</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>
一 原始css + jquery 實現(xiàn)橫向滾動條(原生js可以實現(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,是因為不知道tabs有多少個,不能把寬度寫死,只能動態(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; }
對于white-space,item在沒有用white-space:nowrap時,發(fā)現(xiàn)一個問題,在未設定寬度的情況下,一個單詞不會換行,而漢字會換行,認為是和display:flex有關(guān)系,上網(wǎng)查閱,才知道:white-space是看空格來識別是否換行的,單詞是作為一個字符,所以要針對于漢字和英文,都要設置white-space:nowrap不換行。因為漢字和英文的不同,導致所占的寬度不一致,所以要留1到2個像素。
對應的筆記和實例,我放到了GitHub,https://github.com/sqh17/notes (本地下載) 如果想實踐可以去clone下來。
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
jQuery可自定義滾動條的產(chǎn)品圖片橫向滾動源碼
這是一款效果非常棒的jQuery圖片滾動插件源碼,這款jQuery插件有以下特點:1.可以設置任意數(shù)量的圖片;2.點擊圖片即可將當前圖片激活放大;3.可以點擊左右的箭頭來進行圖片2014-08-05- 一款js實現(xiàn)的圖片橫向自定義滾動條效果,兼容目前主要瀏覽器2014-06-24
通過jQuery實現(xiàn)的不用點擊隨鼠標自動滾動的橫向滾動條效果
可以通過鼠標拖動滾動條來滾動圖片,也可以直接把鼠標放置到滾動條兩端,不用點擊,圖片自動滾動2013-08-20jQuery自定義風格各異的橫向或縱向內(nèi)容滾動條效果
可以在網(wǎng)頁中任何地方定義多種風格的帶滾動條的內(nèi)容區(qū),滾動條可以橫向也可以縱向2013-07-10textarea去掉滾動條 textarea橫向或縱向滾動條的去掉方法
有些新手朋友可能對去掉textarea橫向或縱向滾動條不是很擅長,本文將詳細介紹,需要了解的朋友可以參考下2012-12-06- IE一向是有豎向滾動條區(qū)域的,無論頁面是否超過一屏,這回到了IE8竟然不是了。。。2010-12-27
- 最近的項目中,遇到ie6下當iframe出現(xiàn)縱向滾動條時同時會出現(xiàn)橫向滾動條。分析了代碼,大致的原因是iframe中的頁面有相對body的樣式包含width:100%的元素。2010-01-10