移动端弹出层加了滚动条之后,滚动条一直在,有些不美观,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实现隐藏滚动条仍可以滚动的更多相关文章

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

    方法一: 计算滚动条宽度并隐藏起来,其实我只是把滚动条通过定位把它隐藏了起来,下面给一个简化版的代码: <div class="outer-container"> &l ...

  2. CSS 实现隐藏滚动条同时又可以滚动(转)

    CSS 实现隐藏滚动条同时又可以滚动 移动端页面为了更接近原生的体验,是否可以隐藏滚动条,同时又保证页面可以滚动? 使用 overflow:hidden 隐藏滚动条,但存在的问题是:页面或元素失去了滚 ...

  3. 前端切图:CSS实现隐藏滚动条同时又可以滚动

    CSS 实现隐藏滚动条同时又可以滚动 原始功能: 图片发自简书App 添加伪类之后的功能: 图片发自简书App 完整demo如下: <!DOCTYPE html> <html> ...

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

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

  5. 3种方法实现CSS隐藏滚动条并可以滚动内容

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

  6. CSS怎么隐藏滚动条(三种方法)

    xhtml中隐藏滚动条在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transi ...

  7. 纯css 实现横向滚动条--移动端

    * { margin:0; padding:0; } li { list-style:none; } .box1 { width:320px; height:60px; overflow:hidden ...

  8. CSS 实现隐藏滚动条同时又可以滚动

    方法1: 利用 css 3 的新特性  -webkit-scrollbar, 但是这种方式只兼容chrome,不兼容 火狐 和 IE. /* for Chrome */ .content::-webk ...

  9. css隐藏滚动条依旧可以滚动

    在做企业页面的时候,大部分页面都应该是活的,不应该写死,因为要从后台拿数据进行填充.而后台的数据是不确定的,有时候会让我们的容器撑得很大.这时候我们需要隐藏掉滚动条达到美观或者其他布局效果,隐藏掉单个 ...

随机推荐

  1. oracle事务块示例

    begin Insert into T_SYS_PAGEOPER (FOPERID,FPAGEID) values (152,22); Insert into T_SYS_PAGEOPER (FOPE ...

  2. OZ Report 오즈 리포트 개발

    //这只单元格数据颜色 if( (int)getattr("caption") > 100) setattr("bgcolor", "$0,0, ...

  3. C++刷题——2830: 递归求1*1+2*2+3*3+……+n*n

    Description 定义一个递归函数sum int sum(int n); //函数声明,返回12+22+32+--+n2的和 注意:sum为递归函数 Input 正整数n的值 Output 12 ...

  4. 智能指针tr1::shared_ptr、boost::shared_ptr使用

    对于tr1::shared_ptr在安装vs同一时候会自带安装,可是版本号较低的不存在.而boost作为tr1的实现品,包括 "Algorithms Broken Compiler Work ...

  5. container_of学习笔记

    最近在学习c语言宏编程,看到了container_of宏,深入学习了一天,做个笔记留念. 1.看一下书上写的container_of的版本: #define offsetof(TYPE,MEMBER) ...

  6. Mac OSX下Go语言开发环境的搭建与配置--使用InteliJ IDEA 13

    折腾了一上午终于把go语言的ide配置好了. 其实GO语言的语法和特性早在去年的时候就学习了一遍.结果后来一直没机会进行开发,结果还是个GO小白.感叹一下,要学好一门编程语言唯一的途径就是多写代码.. ...

  7. C#实现的自定义IIS认证模块 转载

    IIS7以后application pool都支持两种模式:经典模式和集成模式. 所谓经典模式就是与IIS6的application pool运行模式相同,对于asp.net的页面请求处理由单独的as ...

  8. MVC之旅(1)

    其实很久很久之前就有接触asp.net mvc了.那些年,还是在大学校园的美好青葱时光,常常听到一些大牛开口闭口都是mvc,心痒痒的也去图书馆借了本mvc的教材,应该是mvc 2.悲催的是,我都没知道 ...

  9. SYN攻击防护措施

    SYN攻击的应对措施 针对SYN攻击的几个环节.提出对应的处理方法: 方式1:降低SYN-ACK数据包的重发次数(默认是5次): sysctl -w net.ipv4.tcp_synack_retri ...

  10. JAVA连接各种数据库详解

    Java数据库连接(JDBC)由一组用 Java 编程语言编写的类和接口组成.JDBC 为工具/数据库开发人员提供了一个标准的 API,使他们能够用纯Java API 来编写数据库应用程序.然而各个开 ...