当我们的内容超出了我们的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. PIE SDK与Python结合说明文档

    1.功能简介 Python是一种跨平台语言.无论是在Windows.Linux.Unix还是Mac Os系统,我们都可以使用Python.甚至在Linux.Unix及Mac OS系统内已经集成了Pyt ...

  2. 安装软件或运行软件时提示缺少api-ms-win-crt-runtime库解决方法

    最近碰到一个问题,在我软件安装或运行时会提示缺少api-ms-win-crt-runtime-|1-1-0.dll 当然第一个想到的是运行库没有装,但是很清楚的是我的电脑是装过vc_redist_20 ...

  3. Vue.js插槽slot和作用域插槽slot-scope学习小结

    一般来说,在Vue项目中使用父子组建时,都是把通用的HTML结构提取出来写成一个子组件,需要动态展示的数据用过prop属性传递,不过有时候我们可能想给子组件传递一个HTML代码,这个时候用prop不太 ...

  4. 基于原生态Hadoop2.6 HA集群环境的搭建

    hadoop2.6  HA平台搭建   一.条件准备 软件条件: Ubuntu14.04 64位操作系统, jdk1.7 64位,Hadoop 2.6.0,  zookeeper 3.4.6 硬件条件 ...

  5. (转)linux shell单引号、双引号及无引号区别

    原文:http://blog.csdn.net/woshizhangliang999/article/details/50132265 3.描述linux shell中单引号.双引号及不加引号的简单区 ...

  6. 搭建基于Ubuntu的开发环境

    基于ubuntu 16.04 LTS经验 分区方案 内存:4G,硬盘:500G 分区 大小 说明 备注 / 20G 说明 swap 6G 说明 /tmp 15G 临时文件 /var 40G 可变数据目 ...

  7. PowerDesigner 16.5 安装和卸载教程【含有安装文件】

    1 下载 下载地址:https://pan.baidu.com/s/1kqly0d8qU-QluEagXwh53g 密码:n1a3 下载之后目录结构如下: 2 安装教程 1 安装 1.双击安装文件,如 ...

  8. Android多语言与国际化

    internationalization (国际化)简称 i18n,因为在i和n之间还有18个字符,localization(本地化 ),简称L10n.一般用 语言_地区的形式表示一种语言,如 zh_ ...

  9. js 中标签的增删 方法

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  10. PHP SECURITY CALENDAR 2017 学习总结-更新中

    这篇文章主要以审计代码为主来分析每道题目中所存在的漏洞点,记录一下自己的学习: 1.Day 1 - Wish List class Challenge { const UPLOAD_DIRECTORY ...