zoukankan      html  css  js  c++  java
  • html去掉页面滚动条,但保留滚动效果

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

    html{
       height: 100%;
        100%;
       overflow: hidden;  
    }
    body{
      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>

    这样就可以了,另外,需要注意的一点是千万要设置两层元素的宽高、否则还是会不起作用。其实,计算机还是很有意思的。

    https://segmentfault.com/q/1010000006863477

  • 相关阅读:
    async await 了解
    vi 命令
    mysql 相关操作
    mac下配置python的虚拟环境virtualenv和虚拟环境管理包virtualenvwrapper
    ip 域名 和端口号
    脱离 flask 上下文,使用 jinja2 来动态渲染模板
    使用 vue-cli 3.0 创建项目
    p 标签和 span 标签
    el-table 更改表格行高和列髋
    使用 axios 传参问题
  • 原文地址:https://www.cnblogs.com/adkii/p/8258196.html
Copyright © 2011-2022 走看看