CSS 实现隐藏滚动条同时又可以滚动
方法1: 利用 css 3 的新特性 -webkit-scrollbar, 但是这种方式只兼容chrome,不兼容 火狐 和 IE。
/* for Chrome */
.content::-webkit-scrollbar {
display: none;
}
方法2: 在内容容器A外面再嵌套一层容器B并设置 overflow:hidden
,容器A和容器B需要限制尺寸,就变相隐藏了,兼容所有浏览器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超出部分滚动条</title>
</head>
<style type="text/css">
.outer_container {
/* 父容器设置宽度, 并超出部分不显示 */
width: 200px;
height: 300px;
overflow: hidden;
}
.outer_container > .content{
/* 子容器比父容器的宽度多 17 px, 经测正好是滚动条的默认宽度 */
width: 217px;
height: 300px;
overflow-y: scroll;
}
</style>
<body>
<!-- 兼容所有浏览器的超出部分滚动不显示滚动条-->
<div class="outer_container ">
<div class="content">
HELLO WORLD! </br>HELLO WORLD! </br>
HELLO WORLD! </br>HELLO WORLD! </br>
HELLO WORLD! </br>HELLO WORLD! </br>
HELLO WORLD! </br>HELLO WORLD! </br>
HELLO WORLD! </br>HELLO WORLD! </br>
HELLO WORLD! </br>HELLO WORLD! </br>
HELLO WORLD! </br>HELLO WORLD! </br>
HELLO WORLD! </br>HELLO WORLD! </br>
HELLO WORLD! </br>HELLO WORLD! </br>
HELLO WORLD! </br>HELLO WORLD! </br>
</div>
</div>
</body>
</html>
CSS 实现隐藏滚动条同时又可以滚动的更多相关文章
- CSS 实现隐藏滚动条同时又可以滚动(转)
CSS 实现隐藏滚动条同时又可以滚动 移动端页面为了更接近原生的体验,是否可以隐藏滚动条,同时又保证页面可以滚动? 使用 overflow:hidden 隐藏滚动条,但存在的问题是:页面或元素失去了滚 ...
- 前端切图:CSS实现隐藏滚动条同时又可以滚动
CSS 实现隐藏滚动条同时又可以滚动 原始功能: 图片发自简书App 添加伪类之后的功能: 图片发自简书App 完整demo如下: <!DOCTYPE html> <html> ...
- 纯css实现隐藏滚动条仍可以滚动
移动端弹出层加了滚动条之后,滚动条一直在,有些不美观,overflow:hidden;虽然可以隐藏滚动条,但是不能滚动.需要实现隐藏滚动条但是仍可以滚动,js实现太麻烦,直接将滚动条隐藏会更好一些. ...
- CSS实现隐藏滚动条并可以滚动内容
方法一: 计算滚动条宽度并隐藏起来,其实我只是把滚动条通过定位把它隐藏了起来,下面给一个简化版的代码: <div class="outer-container"> &l ...
- CSS怎么隐藏滚动条(三种方法)
xhtml中隐藏滚动条在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transi ...
- 纯css,div隐藏滚动条,保留鼠标滚动效果。
示例1: html,body { height: 100%; } body { overflow: hidden; } .full-screen { position: relative; width ...
- CSS隐藏滚动条但又能滚动,不用js实现
隐藏多余的内容,但是可以滑动查看 原理就在于padding-right:17px;把滚动条挤出去隐藏了
- css隐藏滚动条、移动端滚动卡顿的解决
1.如果想保持容器能够滚动,同时不想看到丑陋的滚动条,chrome.firefox和移动端上不考虑兼容性直接 element::-webkit-scrollbar{ display:none } 2. ...
- CSS — 隐藏滚动条,依旧可以滚动
公司的系统,在PC端可以管理我们的公众号,在发布模块页面时有一个预览功能,呈现页面在手机端的样式. 做法很简单,一会就完成了,但是在预览内容过长时手机外框会有一个滚动条,影响美观,于是就想把它去掉,有 ...
随机推荐
- Java学习笔记49(DBUtils工具类二)
上一篇文章是我们自己模拟的DBUtils工具类,其实有开发好的工具类 这里使用commons-dbutils-1.6.jar 事务的简单介绍: 在数据库中应用事务处理案例:转账案例 张三和李四都有有自 ...
- Java学习笔记47(JDBC、SQL注入攻击原理以及解决)
JDBC:java的数据库连接 JDBC本质是一套API,由开发公司定义的类和接口 这里使用mysql驱动,是一套类库,实现了接口 驱动程序类库,实现接口重写方法,由驱动程序操作数据库 JDBC操作步 ...
- Shell-8--数值运算及处理
RANDOM 默认范围是 0~32767
- ORACLE更新数据时如果有就更新没有就插入
SQL写法: begin update table_name set salary = 10000 where emp_id = 5; if sql%notfound then insert into ...
- Jpush极光推送的一些心得
在集成极光推送的时候,test完全正常.部署到服务器后只发送一条推送之后推送不继续发送.经排查: 2018-06-28 10:24:26.394 [ThreadPoolTaskExecutor-4] ...
- python 多环境共存 基础
正在学习python 使用的是3.3 但是由于种种原因吧 还得使用python2.7 所以记录一下 如何安装2个版本 假设 在windows 下面安装的python 版本 和路径 如下 python ...
- WinForm版图像编辑小程序(实现图像拖动、缩放、旋转、抠图)
闲暇之余,开发一个图片编辑小程序.程序主要特点就是可方便的对多个图像编辑,实现了一些基本的操作.本文主要介绍一下程序的功能.设计思路. 执行程序 下载地址: 百度网盘.https://pan.baid ...
- Spring Cloud Ribbon——客户端负载均衡
一.负载均衡负载均衡(Load Balance): 建立在现有网络结构之上,它提供了一种廉价有效透明的方法扩展网络设备和服务器的带宽.增加吞吐量.加强网络数据处理能力.提高网络的灵活性和可用性.其意思 ...
- 使用InstallUtil发布windows服务
发布Windows Service的方法 1. 在默认窗口Service1中右键Add Install,自动生成两个类. 2. 修改serviceInstaller1的属性: a)ServiceNa ...
- google 身份验证器
谷歌身份验证器原理 就是服务器与客户端算法相同