如何使用CSS隐藏滚动条并且兼容大部分浏览器
来源:互联网 发布:今日大宗交易数据 编辑:程序博客网 时间:2024/06/01 09:40
隐藏滚动条,已经自己实测在浏览器Chrome, IE (6+), Firefox, Opera, Safari。
如下demo:
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
Content 1
<html><head> <style> .element, .outer-container { width: 200px; height: 200px; } .outer-container { /* border: 5px solid purple; */ position: relative; overflow: hidden; } .inner-container { position: absolute; left: 0; overflow-x: hidden; overflow-y: scroll; } .inner-container::-webkit-scrollbar { display: none; } </style></head><body> <div class="outer-container"> <div class="inner-container"> <div class="element"> <div>Content 1</div> <div>Content 1</div> <div>Content 1</div> <div>Content 1</div> <div>Content 1</div> <div>Content 1</div> <div>Content 1</div> <div>Content 1</div> <div>Content 1</div> <div>Content 1</div> <div>Content 1</div> <div>Content 1</div> <div>Content 1</div> <div>Content 1</div> <div>Content 1</div> <div>Content 1</div> <div>Content 1</div> <div>Content 1</div> <div>Content 1</div> <div>Content 1</div> <div>Content 1</div> <div>Content 1</div> <div>Content 1</div> <div>Content 1</div> <div>Content 1</div> <div>Content 1</div> <div>Content 1</div> <div>Content 1</div> <div>Content 1</div> <div>Content 1</div> </div> </div> </div></body></html>
参见:https://blogs.msdn.microsoft.com/kurlak/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari/
阅读全文
0 0
- 如何使用CSS隐藏滚动条并且兼容大部分浏览器
- 如何使用iframe实现跨域写入cookie 并且兼容大部分浏览器
- 强制显示隐藏浏览器滚动条css
- 如何使用CSS和JavaScript自定义浏览器滚动条
- css超出隐藏,并且不带滚动条
- 隐藏浏览器滚动条
- css隐藏滚动条,兼容ie和chrome
- css兼容大部分浏览器透明背景设置
- css隐藏滚动条
- 如何隐藏滚动条
- 禁止滚动条滚动并且隐藏滚动条
- 用css、如何让图片自动适应屏幕大小,不出现滚动条,不变形,兼容各个浏览器
- [完]CSS隐藏滚动条
- css实现滚动条隐藏
- css 设置浏览器滚动条
- CSS滚动效果隐藏滚动条
- CSS---前端通过 css如何实现overflow:auto滚动超出部分的同时隐藏滚动条?
- 兼容浏览器获取滚动条位置JS
- STL之List容器
- Chess Queen Uva 11538(基础计数原理)
- 【笨鸟先飞】android重新学习日记9--- 常量数据的储存位置
- SSL
- github常见操作和常见错误!
- 如何使用CSS隐藏滚动条并且兼容大部分浏览器
- python入门(二十七):面向对象之封装
- Gym
- Decision Tree
- 完全卸载oracle11g步骤
- 【并查集】POJ_1984_Navigation Nightmare
- .Net下的Windows服务程序开发指南
- Codeforces Round #429 (Div. 2) 题解
- Redis实现类似同步方法调用的功能(一)