純CSS實現(xiàn)隱藏滾動條但仍具有滾動的效果（移動端和pc端）
發(fā)布時間：2020-02-07 15:41:47 作者：佚名 
我要評論
我要評論這篇文章主要介紹了純CSS實現(xiàn)隱藏滾動條但仍具有滾動的效果（移動端和pc端）,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
移動端
移動端頁面只要兼容 Chrome 和 Safari 就夠了，所以可以使用自定義滾動條的偽類選擇器 ::-webkit-scrollbar 來隱藏滾動條。
.container::-webkit-scrollbar {
display: none;
}
PC 端
PC 端對兼容性的要求相對來說要高一點，所有可以換一種方法，大致思路就是在內(nèi)容div外面包一個父容器div，設(shè)置 overflow: hidden，內(nèi)容div設(shè)置 display-x: hidden; display-y: auto; 最后設(shè)置父容器div的寬度小于內(nèi)容div的寬度或者設(shè)置內(nèi)容div的 margin-right 為負(fù)值就可以了。
<div class="outer">
<div class="content">
<p>1111</p>
<p>222</p>
<p>333</p>
<p>444</p>
</div>
</div>
.outer {
width: 300px;
height: 300px;
overflow: hidden;
.content {
width: 330px;
/*margin-right: -15px;*/
height: 100%;
overflow-x: hidden;
overflow-y: auto;
background: red;
padding-top: 100px;
p:not(:first-child) {
margin-top: 100px;
}
}
}
總結(jié)
以上所述是小編給大家介紹的純CSS實現(xiàn)隱藏滾動條但仍具有滾動的效果（移動端和pc端），希望對大家有所幫助！
相關(guān)文章
css設(shè)置Overflow實現(xiàn)隱藏滾動條的同時又可以滾動
這篇文章主要介紹了css設(shè)置Overflow實現(xiàn)隱藏滾動條的同時又可以滾動的實現(xiàn)代碼，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2019-08-27- 這篇文章主要介紹了使用CSS隱藏元素滾動條的示例代碼,需要的朋友可以參考下2019-07-10
- 這篇文章主要介紹了css 給div添加滾動并隱藏滾動條的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-07-09
- 這篇文章主要介紹了css隱藏移動端滾動條并且ios上平滑滾動的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-23
- 這篇文章主要通過三種方法給大家分享css隱藏滾動條的方法，在此我比較推薦第二種方法，當(dāng)然也根據(jù)實際情況。對本文感興趣的朋友一起學(xué)習(xí)吧2015-11-18
css設(shè)置滾動條顏色與樣式以及如何去掉與隱藏滾動條
我們大家在瀏覽網(wǎng)頁的時偶爾會看到很漂亮的各種顏色樣式的滾動條，這就是通過css代碼控制來實現(xiàn)的，于是本人搜集整理一番，這里和大家分享一下使用CSS設(shè)置滾動條顏色以及如2012-12-16CSS實現(xiàn)隱藏滾動條并可以滾動內(nèi)容效果(三種方式)
今天小編給大家分享3種方法實現(xiàn)CSS隱藏滾動條并可以滾動內(nèi)容，我已經(jīng)在很多地方使用了非常不錯，需要的朋友參考下吧2020-03-25