實現CSS隱藏滾動條并可以滾動內容的方法有哪些

這篇文章給大家分享的是有關實現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;
}

效果圖（沒滾動前）：

效果圖（滾動后）：

這個代碼巧妙的向右移動了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;}

效果圖（沒滾動前）：

效果圖（滾動后）：

感謝各位的閱讀！關于實現CSS隱藏滾動條并可以滾動內容的方法有哪些就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！