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实现太麻烦,直接将滚动条隐藏会更好一些. ...
随机推荐
- Tomcat实战-调优方案
Tomcat的默认配置,性能并不是最优的,可以通过优化tomcat以此来提高网站的并发能力.提高Tomcat的性能可以分为两个方向. 服务器资源 服务器所能提供CPU.内存.硬盘的性能对处理能力有决定 ...
- 【ActiveMQ】之安全机制(一)管控台安全设置
ActiveMQ 管控台基于jetty,默认端口8161,默认用户名,密码都是admin,这样的安全配置过于弱化,所以我们需要修改一下 1.修改端口 找到conf/jetty.xml文件里面这一段配置 ...
- pandas的离散化，面元划分
pd.cut pandas.cut(x, bins, right=True, labels=None, retbins=False, precision=, include_lowest=False) ...
- Spring MVC + Mybatis项目搭建
1.参考<Java Spring MVC项目搭建(一)——Spring MVC框架集成>配置spring mvc需要的jar包及eclipse配置(主要是针对servlet-api.jar ...
- jQuery版本问题，及事件源
jQuery版本的分界线是2.0 2.0之前很多方法支持ie低版本,2.0之后就不支持了 工具:index() 指定元素的索引 (有参数) 不传参的情况下,父级元素下同级元素的排名,传参:指定元素的 ...
- [UE4]HorizontalBox，整体向右对齐
- vue 数据绑定 绑定属性 循环渲染数据
<template> <!-- vue的模板里面 所有的内容要被一个根节点包含起来 --> <div id="app"> <h2>{ ...
- linux驱动开发—基于Device tree机制的驱动编写
前言Device Tree是一种用来描述硬件的数据结构,类似板级描述语言,起源于OpenFirmware(OF).在目前广泛使用的Linux kernel 2.6.x版本中,对于不同平台.不同硬件,往 ...
- CSS实现鼠标悬浮无限向下级展示的简单代码
*{ margin:; padding:; } ul,li{ list-style: none; } .ui-slide-box{ width: 300px; } .ui-slide-item{ wi ...
- ob系列函数中常用函数
ob_start(); //打开一个输出缓冲区,所有的输出信息不再直接发送到浏览器,而是保存在输出缓冲区里面. ob_clean(); //删 ...