您好,登錄后才能下訂單哦!
小編給大家分享一下css如何超出顯示滾動(dòng)條,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
css的基本語法是:1、css規(guī)則由選擇器和一條或多條聲明兩個(gè)部分構(gòu)成;2、選擇器通常是需要改變樣式的HTML元素;3、每條聲明由一個(gè)屬性和一個(gè)值組成;4、屬性和屬性值被冒號(hào)分隔開。
css超出顯示滾動(dòng)條的方法:1、計(jì)算滾動(dòng)條寬度并隱藏起來;2、使用三個(gè)容器包圍起來,不需要計(jì)算滾動(dòng)條的寬度;3、自定義滾動(dòng)條的偽對(duì)象選擇器【::webkit-scrollbar】。
本教程操作環(huán)境:windows7系統(tǒng)、css3版,DELL G3電腦。
css超出顯示滾動(dòng)條的方法:
方法1:計(jì)算滾動(dòng)條寬度并隱藏起來
<div class="outer-container"> <div class="inner-container"> ...... </div> </div> .outer-container{ width: 360px; height: 200px; position: relative; overflow: hidden; } .inner-container{ position: absolute; left: 0; top: 0; right: -17px; bottom: 0; overflow-x: hidden; overflow-y: scroll; }
注釋:這個(gè)代碼巧妙的向右移動(dòng)了17個(gè)像素,剛好等于滾動(dòng)條的寬度。這個(gè)值是我手動(dòng)調(diào)試得來的。在chrome和IE沒發(fā)現(xiàn)問題。
方法2:使用三個(gè)容器包圍起來,不需要計(jì)算滾動(dòng)條的寬度
這個(gè)方法相對(duì)于方法1多加了一個(gè)盒子,將內(nèi)容限制在盒子里面了,這樣就看不到滾動(dòng)條的同時(shí)也可以滾動(dòng)。
<div class="outer-container"> <div class="inner-container"> <div class="content"> ...... </div> </div> </div> .element, .outer-container { width: 200px; height: 200px; } .outer-container { border: 5px solid purple; position: relative; overflow: hidden; } .inner-container { position: absolute; left: 0; overflow-x: hidden; overflow-y: scroll; } .inner-container::-webkit-scrollbar { display: none; }
方法3:自定義滾動(dòng)條的偽對(duì)象選擇器::webkit-scrollbar
這種方法不兼容IE,做移動(dòng)端的可以使用。
.element::-webkit-scrollbar { width: 0 !important } IE 10+
.element { -ms-overflow-style: none; } Firefox
.element { overflow: -moz-scrollbars-none; }
以上是“css如何超出顯示滾動(dòng)條”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。