移动端弹出层加了滚动条之后,滚动条一直在,有些不美观,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. 在做和sap系统集成的一点心得

    最这一个月和sap做集成,把主数据中的数据写入到sap系统中,做集成就离不开联调,平时开发中,一个复杂点的系统还容易出问题,涉及到两个系统,由于两个或多个系统来自不同的厂家,各个厂家的开发对业务的理解 ...

  2. jmeter ---测试TCP服务器/模拟发送TCP请求

    jmeter测试TCP服务器/模拟发送TCP请求 jmeter测试TCP服务器,使用TCP采样器模拟发送TCP请求. TCP采样器:打开一个到指定服务器的TCP / IP连接,然后发送指定文本并等待响 ...

  3. idea 编程字体推荐

    monaco vardana fira code mediu dejavu sans mono 上述字体 在14号字 1.1倍行距 时编程比较舒服

  4. navigate是Router类的一个方法,主要用来跳转路由。

    navigate是Router类的一个方法,主要用来跳转路由. 1 2 3 4 5 6 7 8 9 interface NavigationExtras {  relativeTo : Activat ...

  5. 匿名内部类 , Iterable<T> 和 Iterator<T>

    package generic; import java.util.ArrayList; import java.util.Arrays; import java.util.Collection; i ...

  6. Nginx图片的防盗链配置

    [root@web01 www]# cat /app/server/nginx/conf/vhosts/default.conf server { listen default_server; ser ...

  7. 基于libmemcached,php扩展memcached的安装

    基于libmemcached,php扩展memcached的安装 张映 发表于 -- 分类目录: php 标签:libmemcached, memcached, php, 安装 一,为什么要装memc ...

  8. iOS开发多线程篇 04 —线程间的通信

    iOS开发多线程篇—线程间的通信 一.简单说明 线程间通信:在1个进程中,线程往往不是孤立存在的,多个线程之间需要经常进行通信 线程间通信的体现 1个线程传递数据给另1个线程 在1个线程中执行完特定任 ...

  9. 点击按钮,实现两个td值互换

    <body> <table id="table1"> <tr> <td>第一个单元格</td> <td>第二 ...

  10. Ubuntu SVN服务器的搭建与配置(转)

    Ubuntu SVN服务器的搭建与配置 一.         安装 sudo apt-get install subversion sudo apt-get install libapache2-sv ...