纯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隐藏滚动条依旧可以滚动
在做企业页面的时候,大部分页面都应该是活的,不应该写死,因为要从后台拿数据进行填充.而后台的数据是不确定的,有时候会让我们的容器撑得很大.这时候我们需要隐藏掉滚动条达到美观或者其他布局效果,隐藏掉单个 ...
随机推荐
- 数据库对m³等特殊符号的支持
目前我只遇到过m³这个特殊符号,会影响正常使用. 比如,我在数据库中搜索: select * from table where container='10m³'; 即使数据库中对应的值,但也无法搜索出 ...
- elasticsearch mapping问题解决
1.报错信息如下: [--16T00::,][WARN ][logstash.outputs.elasticsearch] Could not index event to Elasticsearch ...
- python list插入、拼接
1可以使用"+"号完成操作 输出为: [1, 2, 3, 8, 'google', 'com'] 2.使用extend方法 . 输入相同 3使用切片 输出相同 PS:len(l1) ...
- sklearn基本回归方法
https://blog.csdn.net/u010900574/article/details/52666291 博主总结和很好,方法很实用. python一些依赖库: https://www.lf ...
- Jumpserver web界面跳板机
Jumpserver.org 普通用户 仪表盘 查看主机 上传下载 访问官网 欢迎使用Jumpserver开源跳板机系统 帮助 Log out 查看资产 仪表盘 资产管理 查看资产 主机详细信息列表 ...
- Bash中的括号(二)
双方括号[[]]的用法: 1.先举个例子说明: 假如你要再判断某个目录是否存在,又想当然写成: $ [ -f exists.txt && -d exists_folder ]; ech ...
- Jetty - Handler源码分析
1. 描述 基于Jetty-9.4.8.v20171121. Handler是Jetty服务处理器,用户Server处理HTTP请求. Handler可以做如下处理: (1)完全生成HTTP响应: ( ...
- linux学习笔记8--命令touch
linux的touch命令不常用,一般在使用make的时候可能会用到,用来修改文件时间戳,或者新建一个不存在的文件. touch命令有两个功能:一是用于把已存在文件的时间标签更新为系统当前的时间(默认 ...
- java @override 报错处理
转载自:http://blog.sina.com.cn/s/blog_9c7605530101kl9r.html 一.java @override 报错处理 做项目的时候,同事那边电脑上编译通过的ja ...
- STL源代码剖析——STL算法stl_algo.h
前言 在前面的博文中剖析了STL的数值算法.基本算法和set集合算法.本文剖析STL其它的算法,比如排序算法.合并算法.查找算法等等.在剖析的时候.会针对函数给出一些样例说明函数的使用.源代码出自SG ...