首頁 > web前端 > css教學 > 主體

2種方法實作CSS隱藏捲軸並且可以捲動內容的方法

青灯夜游
發布: 2018-09-12 17:47:25
原創
1801 人瀏覽過

隱藏捲軸的同時還需要支援滾動,我們經常在前端開發中遇到這種情況,最容易想到的是加一個iscroll插件,但其實現在CSS也可以實現這個功能。本章為大家介紹2種方法實作CSS隱藏捲軸並且可以捲動內容的方法。有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

方法1:計算滾動條寬度並隱藏起來

#html程式碼:

<div class="outer-container">
    <div class="inner-container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies. Quisque vitae tincidunt purus. Vivamus feugiat bibendum erat, nec interdum urna porta sed. Nunc lobortis neque orci, ut suscipit nisl congue feugiat. Vivamus feugiat tellus quis cursus sollicitudin. Curabitur dolor massa, dictum ut ipsum in, porttitor pellentesque ante. Aenean egestas cursus tempor. Maecenas semper tortor sit amet egestas cursus. Mauris porttitor quis nisi ut tincidunt. Curabitur adipiscing eleifend nibh. Praesent mauris leo, consequat vitae orci eget, vestibulum bibendum nisi. Aliquam tempus diam ut tortor cursus, eget sodales augue adipiscing. Nulla at dignissim libero.
     </div>
</div>
登入後複製

css程式碼:

.outer - container {
	width: 360 px;height: 200 px;position: relative;overflow: hidden;
}
.inner - container {
	position: absolute;left: 0;top: 0;right: -17 px;bottom: 0;overflow - x: hidden;overflow - y: scroll;
}
登入後複製

效果圖(沒捲動前):

2種方法實作CSS隱藏捲軸並且可以捲動內容的方法

#效果圖(捲動後):

2種方法實作CSS隱藏捲軸並且可以捲動內容的方法

這個程式碼巧妙的向右移動了17個像素,剛好等於滾動條的寬度。這個值是我手動調試得來的。在chrome和IE沒發現問題。

方法2:使用三個容器包圍起來,不需要計算捲軸的寬度

程式碼如下:

#
<div class="outer-container">
     <div class="inner-container">
        <div class="content">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies. Quisque vitae tincidunt purus. Vivamus feugiat bibendum erat, nec interdum urna porta sed. Nunc lobortis neque orci, ut suscipit nisl congue feugiat. Vivamus feugiat tellus quis cursus sollicitudin. Curabitur dolor massa, dictum ut ipsum in, porttitor pellentesque ante. Aenean egestas cursus tempor. Maecenas semper tortor sit amet egestas cursus. Mauris porttitor quis nisi ut tincidunt. Curabitur adipiscing eleifend nibh. Praesent mauris leo, consequat vitae orci eget, vestibulum bibendum nisi. Aliquam tempus diam ut tortor cursus, eget sodales augue adipiscing. Nulla at dignissim libero.
        </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;}
登入後複製

效果圖(沒捲動前):

2種方法實作CSS隱藏捲軸並且可以捲動內容的方法

#效果圖(捲動後):

2種方法實作CSS隱藏捲軸並且可以捲動內容的方法

###############################################################

以上是2種方法實作CSS隱藏捲軸並且可以捲動內容的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!