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

最新推荐文章于 2024-05-11 17:24:54 发布

宠辱不惊去留无意

最新推荐文章于 2024-05-11 17:24:54 发布

阅读量3.3k

点赞数 2

文章标签：去掉滚动条保留滚动功能

本文链接：https://blog.csdn.net/weixin_38722500/article/details/102666168

版权

这个思想相当的重要：

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

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

然后自己的html代码是这样的：

<html>
<head >
<meta charset="UTF-8">
<title></title>
<style type="text/css">
    
    .parentDiv{
         height: 100px;  
             width: 200px;  
             overflow: hidden;  
             border: 1px solid #ccc;  
             
        }
.childDiv{
         height: 100%;  
             width: 200px;  
             overflow-y: auto;  
             overflow-x: hidden; 
        }
</style>
</head>
<body>
    <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>
                   <li>test</li>
                   <li>test</li>
                   <li>test</li>
                   <li>test</li>
                   <li>test</li>
                   <li>test</li>
                   <li>test</li>
                   <li>test</li>
                   <li>test</li>
                   <li>test</li>
                   <li>test</li>
                   <li>test</li>
                   <li>test</li>
                   <li>test</li>
               </ul>
       </div>

</body>
</html>

简单、粗暴

宠辱不惊去留无意

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
html去掉页面滚动条，但保留滚动效果

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

扫一扫