亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

css實現(xiàn)隱藏滾動條并可以滾動內(nèi)容的實例代碼

  發(fā)布時間：2020-11-03 15:34:43   作者：nunumaymax   我要評論
這篇文章主要介紹了css實現(xiàn)隱藏滾動條并可以滾動內(nèi)容的實例代碼,代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

前言

當頁面的html結(jié)構(gòu)嵌套的盒子很多的時候，可能會導致一個頁面中含有多個垂直滾動條。
這樣的話很影響頁面的樣式，所以我們需要隱藏滾動條的同時還支持滾動，下面就是利用css實現(xiàn)的兩種方法。

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

原理：外面的盒子和里面的盒子利用子絕父相進行布局，里面的盒子向右移動17個像素，剛好等于滾動條的寬度（手動調(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;
    /*這四個方向的位置要寫全，否則不生效*/
    top:0;
    left:0;
    bottom:0;
    right:-17px;
    overflow-y: scroll;
}

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

效果如下：

在這里插入圖片描述

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

效果如下：

在這里插入圖片描述

到此這篇關(guān)于css實現(xiàn)隱藏滾動條并可以滾動內(nèi)容的文章就介紹到這了,更多相關(guān)css實現(xiàn)隱藏滾動條內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論