纯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隐藏滚动条依旧可以滚动
在做企业页面的时候,大部分页面都应该是活的,不应该写死,因为要从后台拿数据进行填充.而后台的数据是不确定的,有时候会让我们的容器撑得很大.这时候我们需要隐藏掉滚动条达到美观或者其他布局效果,隐藏掉单个 ...
随机推荐
- 中小型研发团队架构实践:Redis快速入门及应用
Redis的使用难吗?不难,Redis用好容易吗?不容易.Redis的使用虽然不难,但与业务结合的应用场景特别多.特别紧,用好并不容易.我们希望通过一篇文章及Demo,即可轻松.快速入门并学会应用. ...
- Java并发编程(一):并发与高并发等基础概念
并发概念 同时拥有两个或者多个线程,如果程序在单核处理器上运行,多个线程将交替地换入或者换出内存,这些线程是同时存在的,每个线程都处于执行过程中的某个状态.如果运行在多核处理器上,程序中的每个线程都将 ...
- HR问“预期薪资是多少”,这么说能加薪zz
每年过完节,收好上一年的年终奖,身边人就开始蠢蠢欲动,招聘市场也异常火爆,节前各种裁员的新闻,过了个节都变成了“我们还要继续招人”. 年景不好,人才更是成了紧俏货.可现实中,我却发现,优质的人才未必能 ...
- netty4.1.32 pipeline的添加顺序和执行顺序
本文只想讨论一下pipeline的执行顺序问题,因为这个搞不明白就不知道先添加编码还是解码,是不是可以混淆添加等等一系列事情 pipeline.addLast(new outboundsHandler ...
- Git-git 忽略 IntelliJ .idea文件
$ echo ‘.idea’ >> .gitignore $ git rm -rf .idea $ git add .gitignore
- 亚信UED前端流程自动化构建工具
亚信UED前端流程自动化构建工具 .wmd-input, .wmd-input:focus, #md-section-helper {font-size: 14px !important;line-h ...
- JSON资料整理(转载)
目录 1.什么是json 2.json语法规则 3.json基础结构 4.json基础示例 5.JSON和XML比较 6. .NET操作JSON 原始方式 通用方式 内置方式 契约方式 通过序列化将. ...
- golang模板语法简明教程
[模板标签] 模板标签用"{{"和"}}"括起来 [注释] {{/* a comment */}} 使用“{{/*”和“*/}}”来包含注释内容 [变量 ...
- uva11383 Golden Tiger Claw 深入理解km算法
/** 题目: uva11383 Golden Tiger Claw 深入理解km算法 链接:https://vjudge.net/problem/UVA-11383 题意:lv 思路:lrj训练指南 ...
- flask os.environ 的作用
使用环境变量取值, 是为了增强系统的适应性, 在某些场景下, 设置环境变量比较方便. 假如, 你有一套代码, 部署在不同的系统中, 恰好这些系统有权限且很容易地设置环境变量, 那么, 这时候通过环境变 ...