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实现太麻烦,直接将滚动条隐藏会更好一些. ...
随机推荐
- 【java】之获取HTTP请求的值常用方法
logger.info("销帐完成通知回调,请求URL:"+req.getRequestURI().toString()); InputStream in = req.getInp ...
- 项目启动时报错Instantiation of bean failed; nested exception is java.lang.ExceptionInInitializerError
https://www.cnblogs.com/liuyp-ken/p/7911536.html 解决过程: 1.检查配置,反反复复看了很多遍,确认没有问题. 2. 网上找了很多资料,类似的问题很多, ...
- [UE4]创建KillInfoPanel
不设置UniformGrid的尺寸,改成在父级“WB_FPPCharacter”中设置尺寸,这样可以更方便的控制.
- mysql 8.0 错误The server requested authentication method unknown to the client
mysql 安装了最新版本8.0.11后创建用户并授权后,授权的用户连接数据库提示 The server requested authentication method unknown to the ...
- Java开发各层对象专用名词含义 PO,VO,DAO,BO,DTO,POJO, BYO,Entity,JavaBean,JavaBeans
Java的几种名词(PO,VO,DAO,BO,POJO)解释 PO:persistant object 持久对象.可以看成是与数据库中的表相映射的java对象.最简单的PO就是对应数据库中某个表中的一 ...
- OpenJudge 兔子与樱花
[题解] 求任意两点间的最短路径.此题数据量较小,用Floyd算法,时间复杂度为O(n^3). 参考https://blog.csdn.net/qq_34594236/article/details/ ...
- POI实现导出Excel和模板导出Excel
一.导出过程 1.用户请求导出 2.先访问数据库,查询需要导出的结果集 3.创建导出的Excel工作簿 4.遍历结果集,写入工作簿 5.将Excel已文件下载的形式回复给请求客户端 二.具体实现(截取 ...
- hive on spark的坑
原文地址:http://www.cnblogs.com/breg/p/5552342.html 装了一个多星期的hive on spark 遇到了许多坑.还是写一篇随笔,免得以后自己忘记了.同事也给我 ...
- delphi打开项目提示unable to find resource on dll projects
用记事本打开*.dof文件, 把这行[Resource DLL Projects]及它的所属的内容删除就行了.
- Java - 34 Java 文档注释
Java 文档注释 Java只是三种注释方式.前两种分别是// 和/* */,第三种被称作说明注释,它以/** 开始,以 */结束. 说明注释允许你在程序中嵌入关于程序的信息.你可以使用javadoc ...