css隐藏overflow:scroll出现的滚动条

没有兼容性问题!没有兼容性问题!没有兼容性问题!

<div class="out_container">
    <ul class="list_container">
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
    </ul>
</div>

假设,list_container是需要内容滚动的,如果用css实现,必然会用到overflow:scroll这个属性,如果用js就另当别论了。
如何将出现的scroll滚动条隐藏呢?
假设滚动的区域宽和高ui给的是300*200,接下来看css代码

.out_container{
    width:300px;
    height:200px;
    overflow:hidden;
}
.list_container{
    width:330px;
    height:220px;
    overflow:scroll;
}

将list_container的宽和高都超出外面容器,由于外层有overflow:hidden属性,正好把内层出现的滚动条给隐藏住了,如果担心每个浏览器的滚动条宽高不一样,可将list_container的宽高值设置大一些也不会影响到其他内容。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,825评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,645评论 32 459
  • display: none; 与 visibility: hidden; 的区别 联系:它们都能让元素不可见 区别...
    纹小艾阅读 1,703评论 0 1
  • 一身素衣临江,仰天责问 力透春秋,悲歌一曲 当苦艾叶绿遍山坡 又是端午,龙舟竟发 划破五月的天空 逼近雄黄酒的气味...
    老影子阅读 184评论 0 1
  • AndroidStudio使用JNI教程 环境必须有NDK,androidstudio 如果是Android—22...
    myserendipit阅读 1,957评论 1 12