纯CSS+div风格的隐藏

1、在需要滚动的元素外面设置另一个div。

2、为最外面的div设置样式overflow:hidden，宽度小于需要滚动的元素。滚动的元素设置样式。

<style type="text/css">
*{margin:0;padding:0;}
.box{
    width: 100px;
    height: 300px;
    overflow:hidden;
    border:1px solid #000;
    margin:50px auto;
}
ul {
    height: 100%;
    width: 120px;
    overflow-x: hidden;
    overflow-y: scroll;
} 
 
ul li{
    list-style: none;
    width: 100px;
    height:60px;
    line-height: 60px;
    text-align: center;
    border:1px solid #ccc;
    margin-top: -1px;
}
 
</style>
 
<div>
    <ul>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
    </ul>
 
</div>

横向滑动效果，隐藏滚动条的实例

//父级标签
   .style-banner {
      height: 1.2333rem;
      background: crimson;
      ul {
        width: auto;
        height: 100%;
        overflow-x: auto;
        white-space: nowrap;
        > li {
          display: inline-block;
          height: 100%;
          width: 2.9125rem;
          background: salmon;
        }
      }
      // 谷歌浏览器 隐藏滚动条
      ul::-webkit-scrollbar {
        display: none;
      }
      // 火狐浏览器 隐藏滚动条 IE浏览器 隐藏滚动条
      ul {
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none;
      }
 
html 结构
        <div>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>

以上就是css对滚动条进行隐藏的方法，希望对大家有所帮助。更多编程基础知识学习：python学习网

本文教程操作环境：windows7系统、css3版，DELL G3电脑。