当我们的内容超出了我们的div,往往会出现滚动条,影响美观。

尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。  我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效果。

这里介绍一个简单的方法。

大体思路是在div外面再套一个div。这个div设置overflow:hidden。

而内容div设置 overflow-y: scroll;overflow-x: hidden;

然后再设置外层div的width小于内层div的width。

这个内层div其实是会出现滚动条的,所以不影响鼠标的滚动效果,而且我们看不到滚动条了。

内层div效果:

加了外层后的效果

怎么在overflow-y:sroll的情况下 隐藏滚动条的更多相关文章

  1. windows下隐藏磁盘分区

    在一定情况下有的人会想隐藏掉部分分区,比如双系统的情况 有两种方式 方法1: 删除盘符,适合在双系统的情况下隐藏掉另外一个系统相关的分区 请注意是删除盘符 不是删除分区 此电脑右键管理 点击磁盘管理 ...

  2. windows下隐藏磁盘分区(转)

    在一定情况下有的人会想隐藏掉部分分区,比如双系统的情况 有两种方式 方法1: 删除盘符,适合在双系统的情况下隐藏掉另外一个系统相关的分区 请注意是删除盘符 不是删除分区 此电脑右键管理 点击磁盘管理 ...

  3. 在使用NavigationController情况下的布局的Y轴的起始位置

    在有的时候,当一个ViewController被push进一个NavigationController的时候,view上会有一个高度为64的NavigationBar(除非主动隐藏了Navigatio ...

  4. js+jquery+html实现在三种不通的情况下,点击图片放大的效果

    js+jquery+html实现在三种不通的情况下,点击图片放大的效果. 三种情况分别是:图片的父元素宽高固定;  图片的宽高固定;  图片的父元素宽固定,高度不固定 第一种情况:图片的父元素宽高固定 ...

  5. 如何在删除ibdata1和ib_logfile的情况下恢复MySQL数据库

    昨天,有个朋友对公司内部使用的一个MySQL实例开启binlog,但是在启动的过程中失败了(他也没提,为何会失败),在启动失败后,他删除了ibdata1和ib_logfile,后来,能正常启动了,但所 ...

  6. 排版紧凑情况下IOS 浏览器的文字部分选中问题

    一.需求 一个每一项都是图文混排的列表页,在需要对其中的某一部分文字进行选中copy的时候,IOS个二货每次都是直接选中了整个列表项,无论怎么操作它的选框都没有办法做到部分选中. 这是我本周遇到遇到的 ...

  7. PHP通过加锁实现并发情况下抢码实现

    需求:抢码功能 要求: 1.特定时间段才开放抢码: 2.每个时间段放开的码是有限的: 3.每个码不允许重复: 实现: 1.在不考虑并发的情况下实现: function get_code($len){ ...

  8. Linux不重启的情况下添加硬盘

    众所周知,SATA和SCSI是支持热插拔的,但是新装了这类支持热插拔的驱动器,系统不会马上识别的,往往我们需要重启系统来识别,但是有另外一种方法可以很方面的让系统识别新的设备.作为系统管理员,需要了解 ...

  9. jquery Tab默认情况下自动切换

    <!DOCTYPE html><html lang="zh-CN"><head><meta http-equiv="Conten ...

随机推荐

  1. poj1002 字典树+map+查询单词出现次数

    487-3279 Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 309235   Accepted: 55223 Descr ...

  2. element-ui Form表单验证

    element-ui Form表单验证规则全解 element的form表单非常好用,自带了验证规则,用起来很方便,官网给的案例对于一些普通场景完全没问题,不过一些复杂场景的验证还得自己多看文档摸索, ...

  3. 4~20mA转0~5V

    RCV420是一种精密的I/V转换电路,也是目前最佳的4-20mA转换0-5V的电路方案,有商用级(0℃-70℃)和工业级(-25℃-+85℃)供你选购 301欧姆为精度1%. RCV420运行40m ...

  4. 解决IE9 IE8的跨域 请求问题

    /// <summary> /// 根据url获取对应的HTML /// </summary> /// <param name="url">&l ...

  5. Beam概念学习系列之PTransform数据处理

    不多说,直接上干货! PTransform数据处理 PTransform对PCollection进行并行处理,每次处理1条,例如Filter过滤.Groupby分组.Combine统计.Join关联等 ...

  6. Android 开发手记一NDK编程实例

    在Android上,应用程序的开发,大部分基于Java语言来实现.要使用c或是c++的程序或库,就需要使用NDK来实现.NDK是Native Development Kit的简称.它是一个工具集,集成 ...

  7. Markdown简易使用

    Markdown 笔记 标题 1.一级标题 2.二级标题 3.三级标题 列表 这是 一个 无序列表 这是 一个 有序列表 引用 这是一条引用 图片与链接 图片 链接 Baidu 粗体与斜体 粗体 斜体 ...

  8. tomcat修改jvm内存

    内存大小:-Xms256M -Xmx512M -XX:PermSize=256m -XX:MaxNewSize=256m -XX:MaxPermSize=512m -Djava.awt.headles ...

  9. C++程序设计基础(7)位运算

    注:读<程序员面试笔记>笔记总结 1.知识点 运算 符号 说明 与 & 有0为0,都1为1 或 | 由1为1,都0为0 非(取反) ~ 0变1,1变0 异或 ^ 同为0,异为1 左 ...

  10. Django api

    http://www.cnblogs.com/wulaoer/p/5276050.html