HTML5 元素超出部分滚动, 并隐藏滚动条
方法一, 利用 css 3 的新特性 -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超出部分隐藏滚动条</title>
</head>
<style type="text/css">
#box {
width: 500px;
height: 300px;
overflow-x: hidden;
overflow-y: scroll;
line-height: 30px;
text-align: center;
}
#box::-webkit-scrollbar {
display: none;
}
</style>
<body>
<!-- 兼容所有浏览器的超出部分滚动不显示滚动条 -->
<div id="box">
你好 </br>你好 </br>
你好 </br>你好 </br>
你好 </br>你好 </br>
你好 </br>你好 </br>
你好 </br>你好 </br>
你好 </br>你好 </br>
你好 </br>你好 </br>
</div>
</body>
</html>
方法二, 利用内外层嵌套, 模拟, 兼容所有浏览器, 相对于方法一比较麻烦, 使用时不能对滚动条声明任何样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超出部分滚动条</title>
</head>
<style type="text/css">
#box {
/* 父容器设置宽度, 并超出部分不显示 */
width: 500px;
height: 300px;
overflow: hidden;
}
#box > div {
/* 子容器比父容器的宽度多 17 px, 经测正好是滚动条的默认宽度 */
width: 517px;
height: 300px;
line-height: 30px;
text-align: center;
overflow-y: scroll;
}
</style>
<body>
<!-- 兼容所有浏览器的超出部分滚动不显示滚动条 -->
<div id="box">
<div>
你好 </br>你好 </br>
你好 </br>你好 </br>
你好 </br>你好 </br>
你好 </br>你好 </br>
你好 </br>你好 </br>
你好 </br>你好 </br>
你好 </br>你好 </br>
</div>
</div>
</body>
</html>
HTML5 元素超出部分滚动, 并隐藏滚动条的更多相关文章
- CSS元素超出部分滚动，并隐藏滚动条
方法一, 利用 css 3 的新特性 -webkit-scrollbar, 但是这种方式不兼容 火狐 和 IE <!DOCTYPE html> <html> <head ...
- css 给div添加滚动并隐藏滚动条
在html中 <div class="box"> <div>下面内容会单独滚动</div> <div class="scroll ...
- css 之内容溢出滚动，隐藏滚动条（解决火狐浏览隐藏不了滚动条问题）
解决火狐浏览隐藏不了滚动条问题 1.里层容器的width多17px,外层容器溢出隐藏,能兼容各个浏览器 .outContainer { width:350px; height:300px; overf ...
- CSS 实现隐藏滚动条同时又可以滚动
方法1: 利用 css 3 的新特性 -webkit-scrollbar, 但是这种方式只兼容chrome,不兼容 火狐 和 IE. /* for Chrome */ .content::-webk ...
- ie10中元素超出父元素的宽度时不能自动隐藏
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-02-21) 今天遇到一个问题,ie10中元素超出父元素的宽度时不能自动隐藏,而其余浏览器却正常显示. 解决方法是,手动给其设 ...
- CSS 实现隐藏滚动条同时又可以滚动（转）
CSS 实现隐藏滚动条同时又可以滚动 移动端页面为了更接近原生的体验,是否可以隐藏滚动条,同时又保证页面可以滚动? 使用 overflow:hidden 隐藏滚动条,但存在的问题是:页面或元素失去了滚 ...
- 3种方法实现CSS隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其 实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1 ...
- 实现CSS隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
- 纯css实现隐藏滚动条仍可以滚动
移动端弹出层加了滚动条之后,滚动条一直在,有些不美观,overflow:hidden;虽然可以隐藏滚动条,但是不能滚动.需要实现隐藏滚动条但是仍可以滚动,js实现太麻烦,直接将滚动条隐藏会更好一些. ...
随机推荐
- MDIEMDIE双心封装版0.3.0.0RC6V2
MDIEMDIE双心封装版0.3.0.0 RC6V2官方主页:http://cres.s28.xrea.com/MDIE(多文档界面资源管理器)是一个MDI类型的文件管理软件,是代替资源管理器的一个无 ...
- C/C++基础----重载运算与类型转换
非成员版本 data1 + data2: operator+(data1, data2); 成员版本 data1 += data2: data1.operator+=(data2); 不建议的重载 逻 ...
- Python——ipython（python programming）
Tab自动补充 Ctrl+c中断程序 ?帮助调出文档 _得到上次的结果 ,__的到上上次结果,___得到上上次结果 %开头的为魔术命令 %timeit 得到运算时间,多次求平均 %%time ...
- PostgreSQL中的group by
问题描述:今天使用了PostgerSQL查询统计一下相关信息,发现 报错了 SELECT * FROM "public"."dc_event_data" WHE ...
- centos6.8下pptp客户端的安装配置
原文: https://blog.csdn.net/zhang11321132/article/details/20612473 yum -y install ppp pptp pptp-setup ...
- Jmeter（十）检查点
检查点又名断言,我们在手工测试过程中肉眼以及自己的逻辑思维对实际结果进行判断是否与预期结果一致,但是工具是死的,没有眼睛,没有思维,并不知道需要判断的信息在哪块,或者是来判断什么东西,我们需要让工具更 ...
- centos6和centos7的防火墙的操作
1:centos6的两种方式 1.1:service方式 查看防火墙状态: [root@centos6 ~]# service iptables status iptables:未运行防火墙. 开启防 ...
- xml布局解析报错的可能原因
xml布局解析报如下的错11-15 16:55:21.425 17633-17633/com.hongfans.mobileconnect I/LogUtils_info: [CrashHandler ...
- delphi HTML转义字符编码转换
网上很多把HTML转换成纯文本格式的方法很多思路都是用正则表达式或者分析html代码替换的方法. 本文是利用IE完成转换,即利用IHTMLDocument2接口. Denon天Denon龙Denon ...
- (转)C#实现注册码
原文地址:http://www.cnblogs.com/netcorner/archive/2011/08/31/2911922.html 开发软件时,当用到商业用途时,注册码与激活码就显得很重要了. ...