html去掉页面滚动条，但保留滚动效果

最新推荐文章于 2020-05-09 16:35:51 发布

转载最新推荐文章于 2020-05-09 16:35:51 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/adkii/p/8258196.html

本文介绍了一种通过CSS设置双层布局来隐藏一个滚动条的方法，同时保持内容的完整性和滚动功能，适用于网页或特定div元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　　　比较实用的一个小例子，有时候页面上带有滚动条会影响美观，出现两个滚动条的时候更是尴尬，这样的情况下就需要我们去掉一个滚动条，但是去了滚动条后页面又显示不全了，怎么办？还得保留滚动效果-----原来我，什么都想要（哈哈）。实现方法其实也很简单，看了网上的大神的解决思维，总结如下，制造两层，一个父层，一个子层，如果是div去滚动条就在内容div外面再加一层div，如果是要去年整个页面的滚动条，那就给html（父）和body（子）设置样式就可以了。具体CSS代码如下：

html{
   height: 100%;
   width: 100%;
   overflow: hidden;  
}
body{
 width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px;
}

　　以上样式是实现去掉整个页面的滚动条，如果去掉div的滚动条，其实思路是一样的，主要是为了自己记住，还是再上个代码，具体问题具体解决嘛。

CSS代码：

.parentDiv{
         height: 400px;  
             width: 200px;  
             overflow: hidden;  
             border: 1px solid #ccc;  
             margin: 20px auto;  
        }
.childDiv{
         height: 100%;  
             width: 220px;  
             overflow-y: auto;  
             overflow-x: hidden; 
        }

HTML代码：

    <div class="parentDiv">
               <ul class="childDiv">
                   <li>test</li>
                   <li>test</li>
                   <li>test</li>
                   <li>test</li>
                   <li>test</li>
                   <li>test</li>
                   <li>test</li>
               </ul>
       </div>