移动端弹出层加了滚动条之后,滚动条一直在,有些不美观,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. jq的form验证

    jQuery(document).ready(function(){ $('#cform img.contact-loader').hide(); $('#cform').submit(functio ...

  2. 采集音频和摄像头视频并实时H264编码及AAC编码

    转自:http://www.cnblogs.com/haibindev/archive/2011/11/10/2244442.html 0. 前言 我在前两篇文章中写了DirectShow捕获音视频然 ...

  3. android获取系统应用大小的方法

    <span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-s ...

  4. ios 微信开发

    首先依照对应的文档获得对应的key - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NS ...

  5. 如何给app客户端进行埋点?

    1.什么是数据埋点? 当一款app开发完成后,一定需要查看数据,来分析用户访问量,点击量,转化率等等指标.想要查看数据,就得先做好数据埋点 注:html和app数据埋点的方式不同 2.常用app数据分 ...

  6. 【Android界面实现】Drawable Animation 使用介绍

        转载请注明出处:http://blog.csdn.net/zhaokaiqiang1992     (眼下仅仅能用在View对象上的动画效果的实现有两种,一种就是上一篇的View Animat ...

  7. 深入理解C#学习笔记之走出误区

    通过学习深入理解C#这本书,发现自己对于C#这门语言一直存在着三个误区. 第一个误区:结构是轻量级的类: 我一直认为值类型不应该具有方法或其他有意义的行为,它们只应该具有一些简单的属性.但书中总结了一 ...

  8. Atitit.png 图片不能显示 php环境下

    Atitit.png 图片不能显示 php环境下 1.1. 不能显示png 下载png 检查使用bcompare与正常png对比.. 多了bom头 , "\xEF\xBB\xBF" ...

  9. atitit.nfc 身份证 银行卡 芯片卡 解决方案 attilax总结

    atitit.nfc 身份证 银行卡 芯片卡 解决方案 attilax总结 1. nfc(近距离无线通讯技术)  1 2. 工作模式 1 3. NFC 蓝牙 红外具体对比如下表: 2 4. TypeA ...

  10. 如何使用ip端口来浏览自己的网站

    现在做网站的朋友越来越多,域名注册后往往需要进行备案,而在备案期间我们的域名又不能正常打开,在服务器上直接编辑浏览我们的网站有些棘手,思来想去,在我们购买的服务器ip后面加上个端口来达到域名一样的效果 ...