溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

css如何實現隱藏滾動條

發布時間:2021-03-17 09:28:12 來源:億速云 閱讀:268 作者:小新 欄目:web開發

這篇文章將為大家詳細講解有關css如何實現隱藏滾動條,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。

方法一、計算滾動條寬度并隱藏起來

原理:外面的盒子和里面的盒子利用子絕父相進行布局,里面的盒子向右移動17個像素,剛好等于滾動條的寬度(手動調試得來的),并且該方法在chrome和IE中沒發現問題。

代碼如下(示例):

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

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

效果如下:

css如何實現隱藏滾動條

方法二、css隱藏滾動條

原理:自定義滾動條的偽對象選擇器::-webkit-scrollbar,不過這個方法不兼容IE,做移動端的可以使用。

代碼如下:

.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>我是好的會計師的接口和很快就放到恢復健康的時刻發揮空間發的是客戶說的框架還是會盡快哈加絨款返回給會盡快收到貨付款交電話費還是快捷的劃分空間的說法客戶反饋好地方客戶反饋就好地方科技健康的恢復健康的回復客戶說的飛機客戶貸款減肥康師傅狂歡節的恢復健康的回復寬度會發生框架的恢復快接電話反饋較好的發肯定是非框架和第三方發貨的回復回復的很快就到合肥科技和第三方盡快恢復得緊緊的返回度假會分開交電話費就肯定會分開交電話費摳腳大漢分開交電話費金鳳凰肯定會分開交電話費客戶開獎號肯定會分開交電話費</div>
</div>

效果如下:

css如何實現隱藏滾動條

關于“css如何實現隱藏滾動條”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

css
AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女