当我们的内容超出了我们的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. Ubuntu下的UNITY和GNOME界面

    [转自] http://www.tuicool.com/articles/nUbMVbU 从Ubuntu 11.04后,UNITY就作为默认界面来推广.如果用户需要体验GNOME 3,还需要用户自己安 ...

  2. 腾讯云(Linux)安装.net core sdk2.1、net core runtime2.1

    按照微软指令安装: sdk2.1:https://www.microsoft.com/net/download/linux-package-manager/centos/sdk-current 1. ...

  3. .net mvc 用jquery ajax成功后页面跳转。

    $.ajax({ //url: 'http://192.168.0.102/webApiDemo/api/WebApiTest/PostStudentInforOnePara', //url: &qu ...

  4. 安装配置flutter环境

    flutter 的中文文档 https://flutterchina.club/get-started/install/ github 地址 https://github.com/flutter/fl ...

  5. 基于memcache的缓存机制的6个指令

    Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度.Memcached ...

  6. 97 条 Linux 运维工程师常用命令总结[转]

    1.ls [选项] [目录名 | 列出相关目录下的所有目录和文件 -a 列出包括.a开头的隐藏文件的所有文件 -A 通-a,但不列出"."和".." -l 列出 ...

  7. python 爬虫系列01-连接mysql

    爬虫学习中......................................... import pymysql conn = pymysql.connect(host=',database ...

  8. 测试次数(C++)

    测试次数(结果填空) (满分17分) 注意事项:问题的描述在考生文件夹下对应题号的“题目.txt”中.相关的参考文件在同一目录中.请先阅读题目,不限解决问题的方式,只要求提交结果.必须通过浏览器提交答 ...

  9. Tomcat配置自定义访问日志 --- 获取请求头部信息

    使用tomcat,搭建完个人网站后,默认记录来访游客的信息是十分有限的,主要有ip和路径以及方法等. 有时候为了获取更多来访信息,比如请求的头部信息,这个时候就需要我们手动配置log了. 开始 进入T ...

  10. 移除“xmlns”命名空间

    用XmlDocument创建一个文档,或者插入一个节点,默认会生成xmlns(命名空间)特性. 假定有一个xml文档如下结构: <?xml version="1.0" enc ...