css如何實(shí)現(xiàn)隱藏滾動(dòng)條

這篇文章將為大家詳細(xì)講解有關(guān)css如何實(shí)現(xiàn)隱藏滾動(dòng)條，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

方法一、計(jì)算滾動(dòng)條寬度并隱藏起來

原理：外面的盒子和里面的盒子利用子絕父相進(jìn)行布局，里面的盒子向右移動(dòng)17個(gè)像素，剛好等于滾動(dòng)條的寬度（手動(dòng)調(diào)試得來的），并且該方法在chrome和IE中沒發(fā)現(xiàn)問題。

代碼如下（示例）：

.outer-container{
     width: 300px;
     height: 200px;
     border:1px solid black;
     overflow:hidden;
     position:relative;
}
.inner-container{
    position:absolute;
    /*這四個(gè)方向的位置要寫全，否則不生效*/
    top:0;
    left:0;
    bottom:0;
    right:-17px;
    overflow-y: scroll;
}

<div class="outer-container">
    <div class="inner-container">
        我是好的會(huì)計(jì)師的接口和很快就放到恢復(fù)健康的時(shí)刻發(fā)揮空間發(fā)的是客戶說的框架還是會(huì)盡快哈加絨款返回給會(huì)盡快收到貨付款交電話費(fèi)還是快捷的劃分空間的說法客戶反饋好地方客戶反饋就好地方科技健康的恢復(fù)健康的回復(fù)客戶說的飛機(jī)客戶貸款減肥康師傅狂歡節(jié)的恢復(fù)健康的回復(fù)寬度會(huì)發(fā)生框架的恢復(fù)快接電話反饋較好的發(fā)肯定是非框架和第三方發(fā)貨的回復(fù)回復(fù)的很快就到合肥科技和第三方盡快恢復(fù)得緊緊的返回度假會(huì)分開交電話費(fèi)就肯定會(huì)分開交電話費(fèi)摳腳大漢分開交電話費(fèi)金鳳凰肯定會(huì)分開交電話費(fèi)客戶開獎(jiǎng)號(hào)肯定會(huì)分開交電話費(fèi)
    </div>
</div>

效果如下：

方法二、css隱藏滾動(dòng)條

原理：自定義滾動(dòng)條的偽對(duì)象選擇器::-webkit-scrollbar，不過這個(gè)方法不兼容IE，做移動(dòng)端的可以使用。

代碼如下：

.wrapper{
	width: 300px;
	height: 200px;
	overflow:auto;
}
/*chrome 和Safari*/
.wrapper::-webkit-scrollbar { width: 0 !important }
/*IE 10+*/
.wrapper { -ms-overflow-style: none; }
/*Firefox*/
.wrapper { overflow: -moz-scrollbars-none; }

<div class="wrapper">
        <div>我是好的會(huì)計(jì)師的接口和很快就放到恢復(fù)健康的時(shí)刻發(fā)揮空間發(fā)的是客戶說的框架還是會(huì)盡快哈加絨款返回給會(huì)盡快收到貨付款交電話費(fèi)還是快捷的劃分空間的說法客戶反饋好地方客戶反饋就好地方科技健康的恢復(fù)健康的回復(fù)客戶說的飛機(jī)客戶貸款減肥康師傅狂歡節(jié)的恢復(fù)健康的回復(fù)寬度會(huì)發(fā)生框架的恢復(fù)快接電話反饋較好的發(fā)肯定是非框架和第三方發(fā)貨的回復(fù)回復(fù)的很快就到合肥科技和第三方盡快恢復(fù)得緊緊的返回度假會(huì)分開交電話費(fèi)就肯定會(huì)分開交電話費(fèi)摳腳大漢分開交電話費(fèi)金鳳凰肯定會(huì)分開交電話費(fèi)客戶開獎(jiǎng)號(hào)肯定會(huì)分開交電話費(fèi)</div>
</div>

效果如下：

關(guān)于“css如何實(shí)現(xiàn)隱藏滾動(dòng)條”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。