主要应用于移动端场景,仿移动端滚动效果。对于隐藏滚动条,众所周知overflow:hidden,但是想要的滚动效果也没了。

所以对于移动端webkit内核提供一个伪类选择器:

.element::-webkit-scrollbar {display:none};

对于这个选择器的相关介绍,参考下面地址:

Styling Scrollbars

Custom Scrollbars in WebKit

还有一种兼容其他浏览器的方法,在内容区域外面套了两个父元素,然后通过修改父元素的样式,变相实现隐藏效果如下:

.out_box {
/*将外面的box高度和内容区域congtents设置一样,宽度比内容小20px,20px的宽度足以隐藏滚动条*/
width:180px;
height: 200px;
position: relative;
overflow: hidden;
background: #EEE;
}
.inner_box {
position: absolute;
left: 0;
overflow-x: hidden;
overflow-y: scroll;
}
.contents {
width: 200px;
height: 200px;
} <div class="out_box">
<div class="inner_box">
<div id="content" class="contents">
<!--内容区域-->
</div>
</div>
</div>

box宽度也是200px时如下图:

box宽为180px,效果如下所示:

达到我们想要的效果!

CSS隐藏overflow默认滚动条同时保留滚动效果的更多相关文章

  1. 纯css隐藏移动端滚动条解决方案(ios上流畅滑动)

    纯css隐藏移动端滚动条解决方案(ios上流畅滑动) html代码展示(直接复制代码保存至本地文件运行即可): <!DOCTYPE html> <html lang="en ...

  2. 纯css隐藏移动端滚动条解决方案(ios上流畅滑动)---转载

    html代码展示(直接复制代码保存至本地文件运行即可): <!DOCTYPE html> <html lang="en"> <head> < ...

  3. CSS和jQuery分别实现图片无缝滚动效果

    一.效果图 二.使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  4. css实现修改默认滚动条样式

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head&g ...

  5. CSS改变浏览器默认滚动条样式

    前言 最近总是看到某网站滚动条不是浏览器默认样式,而是自定义样式   比如我博客的滚动条,自定义滚动条样式和hover前后的效果 顿时来了兴致和有一个疑问,这是怎么实现的呢? 解决   注:经测试,目 ...

  6. css 设置overflow:scroll 滚动条的样式

    /* 定义滚动条样式 */ ::-webkit-scrollbar { width: 6px; height: 6px; background-color: rgba(240, 240, 240, 1 ...

  7. 纯css解决div隐藏浏览器原生滚动条,但保留鼠标滚动效果的问题

    当我们的内容超出了我们的div,往往会出现滚动条,影响美观.尤其是当我们在做一些导航菜单的时候.滚动条一出现就破坏了UI效果.  我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效 ...

  8. 纯css,div隐藏滚动条,保留鼠标滚动效果。

    示例1: html,body { height: 100%; } body { overflow: hidden; } .full-screen { position: relative; width ...

  9. 实现CSS隐藏滚动条并可以滚动内容

    隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...

随机推荐

  1. 关于ajax异步请求不到数据的问题 302跨域请求

    项目大致问题是这样的 在线咨询模块的数据是通过ajax异步加载来请求到数据,然后动态解析并且显示 前台页面的请求代码 后台action: 另外就是这个项目还有一个登陆权限的认证,如果不登录后台或者登录 ...

  2. ACdream 1415 Important Roads

    Important Roads Special JudgeTime Limit: 20000/10000MS (Java/Others)Memory Limit: 128000/64000KB (Ja ...

  3. hdu 2577 模拟

    #include<stdio.h> #define N 200 char s[N]; int judgeup(char c) { if(c>='A'&&c<=' ...

  4. VirtualBox扩展包安装教程|VirtualBox扩展增强包怎么安装

    VirtualBox是一款功能强大的免费虚拟机软件,一般我们安装VirtualBox后要安装扩展增强包,VirtualBox扩展包包含USB2.0和USB3.0控制等支持功能,如果没有装,在使用过程中 ...

  5. spring bean的作用域和自动装配

    1 Bean的作用域 l  singleton单列:整个容器中只有一个对象实例,每次去访问都是访问同一个对象  默认是单列 l  prototype原型: 每次获取bean都产生一个新的对象,比如Ac ...

  6. 小米2S电池电量用尽充电无法开机解决方法

    背景:        昨晚睡觉前关机,记得电量还有百分之七八十,但早上起床后,指示灯一直红灯闪烁.按开机键和其它键都没反应! ! 解决方法:         扣下电池,用万能充冲电,略微多冲一会,由于 ...

  7. Mysql存储过程包括事务,且传入sql数据运行

    有这样一个需求.要求在mysql存储过程中使用到事务,并且运行的是动态的sql语句 代码例如以下: BEGIN DECLARE in_data TEXT; /** 标记是否出错 */ DECLARE ...

  8. 每天自己主动备份mysql脚本

    定时运行脚本: 1.运行 crontab -e 00 00 * * * /bin/bash yourpath/mysqlbak.sh 2.打开自己主动运行文件 vi /etc/crontab 在etc ...

  9. python2.7编码与解码

    常见的编码 ASCII: 美国人发明的,只编码英文字母和符号,1个字节. GB2312: 中国人发明的,增加了中文汉字和符号,2个字节. Unicode: 为了把所有语言都统一到一套编码里,一般是2个 ...

  10. Android Activity组件的启动过程

    0.总图 1.总图中的第一步,Laucher主线程向ActivityManagerService进程发出START_ACTIVITY_TRANSACTION 如图:第一步 ~/Android/fram ...