纯css实现隐藏滚动条仍可以滚动
移动端弹出层加了滚动条之后,滚动条一直在,有些不美观,overflow:hidden;虽然可以隐藏滚动条,但是不能滚动。需要实现隐藏滚动条但是仍可以滚动,js实现太麻烦,直接将滚动条隐藏会更好一些。
在div块外面再包一层div,设置宽度小于内层div宽度,加overflow:hidden;
<div class="container">
<div class="content">
<ul>
<li>内容内容内容内容内容</li>
<li>内容内容内容内容内容</li>
<li>内容内容内容内容内容</li>
</ul>
</div>
</div>
css
.container{
width:92%;
overflow:hidden;
}
.content{
padding: 0.2rem;
max-height:314px;
overflow-y: scroll;
width:96%;
}
纯css实现隐藏滚动条仍可以滚动的更多相关文章
- CSS实现隐藏滚动条并可以滚动内容
方法一: 计算滚动条宽度并隐藏起来,其实我只是把滚动条通过定位把它隐藏了起来,下面给一个简化版的代码: <div class="outer-container"> &l ...
- CSS 实现隐藏滚动条同时又可以滚动(转)
CSS 实现隐藏滚动条同时又可以滚动 移动端页面为了更接近原生的体验,是否可以隐藏滚动条,同时又保证页面可以滚动? 使用 overflow:hidden 隐藏滚动条,但存在的问题是:页面或元素失去了滚 ...
- 前端切图:CSS实现隐藏滚动条同时又可以滚动
CSS 实现隐藏滚动条同时又可以滚动 原始功能: 图片发自简书App 添加伪类之后的功能: 图片发自简书App 完整demo如下: <!DOCTYPE html> <html> ...
- 实现CSS隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
- 3种方法实现CSS隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其 实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1 ...
- CSS怎么隐藏滚动条(三种方法)
xhtml中隐藏滚动条在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transi ...
- 纯css 实现横向滚动条--移动端
* { margin:0; padding:0; } li { list-style:none; } .box1 { width:320px; height:60px; overflow:hidden ...
- CSS 实现隐藏滚动条同时又可以滚动
方法1: 利用 css 3 的新特性 -webkit-scrollbar, 但是这种方式只兼容chrome,不兼容 火狐 和 IE. /* for Chrome */ .content::-webk ...
- css隐藏滚动条依旧可以滚动
在做企业页面的时候,大部分页面都应该是活的,不应该写死,因为要从后台拿数据进行填充.而后台的数据是不确定的,有时候会让我们的容器撑得很大.这时候我们需要隐藏掉滚动条达到美观或者其他布局效果,隐藏掉单个 ...
随机推荐
- AFN访问https设置
AFN访问https的时候需要设定如下两个属性: manager.securityPolicy.allowInvalidCertificates = YES; manager.securityPoli ...
- Mac下忘记了phpAdmin设置的MySQL密码
事情是这样的,我昨天配置完MySQL和PHP环境后,又配置了phpAdmin. 这本来是件好事,结果我看到phpAdmin提醒我说我的MySQL的Root帐号密码是空密码,于是我修改了下密码. 由于p ...
- html5_storage存取实例
<script src="jquery-1.8.3.js"></script><script>function set(){ var tt ...
- Django中的 动态URL配置
举个例子,一家在线书店会为每一本书提供一个URL,如:/books/243/./books/81196/. 让我们创建第三个视图来显示当前时间和加上时间偏差量的时间,设计是这样的: /time/plu ...
- 图片onerror事件,为图片加载指定默认图片
为图片指定加载失败时显示默认图片,js输出的img对象,onerror是事件,不是属性,所以这样写是不起作用的: var img = $(document.createElement("IM ...
- 2015·Fool's Day·NND
本博文没有主旨,仅仅是记录. ============================ Date:2015/4/1 - April Fool's Day! Addr:ZhongHai ======== ...
- java 发送带Basic Auth认证的http post请求实例代码
构造http header private static final String URL = "url"; private static final String APP_KEY ...
- CCNA2.0笔记_VTP
VTP(VLAN Trunking Protocol) 一个能够宣告VLAN配置信息的信息系统: 通过一个共有的管理域,维持VLAN配置信息的一致性: VTP只能在trunk端口发送要宣告的信息: 二 ...
- href中使用相对路径访问上级目录的方法
项目ProjectXXX目录如下: WebContent> hello.jsp Folder1> foo.jsp Folder2> foo2.jsp 在foo.jsp中访问hello ...
- 逻辑漏洞-客户端验证的邮箱-Web渗透实例之中国教育部青少年普法网站逻辑漏洞
转载自:http://www.zmnhssn.com/?post=61 漏洞地址:https://user.qspfw.com 用户登陆界面 具体漏洞地址: 用户密码找回界面:https:// ...