纯css，div隐藏滚动条，保留鼠标滚动效果。
示例1：
html,body {
height: 100%;
}
body {
overflow: hidden;
}
.full-screen {
position: relative;
width: 100%;
height: 100%;
min-width: 1000px;
}
.full-screen .header {
position: absolute;
/*width: 100%;*/
height: 50px;
left:;
right:;
top:;
z-index:;
}
.full-screen .footer {
position: absolute;
/*width: 100%;*/
height: 50px;
left:;
right:;
bottom:;
z-index:;
}
.full-screen .main {
position: absolute;
/*width: 100%;*/
height: auto;
overflow-y: scroll;
left:;
right: -17px;
top: 50px;
bottom: 50px;
z-index:;
}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" type="text/css" href="./css/fullscreen.css">
</head>
<body>
<div class="full-screen">
<div class="header" style="background-color: black;"></div>
<div class="main" style="background-color: yellow;">
<div style="min-height: 500px;">
<ol>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
<li>006</li>
<li>007</li>
<li>008</li>
<li>009</li>
<li>010</li>
<li>011</li>
<li>012</li>
<li>013</li>
<li>014</li>
<li>015</li>
<li>016</li>
<li>017</li>
<li>018</li>
<li>019</li>
<li>020</li>
<li>021</li>
<li>022</li>
<li>023</li>
<li>024</li>
<li>025</li>
<li>026</li>
<li>027</li>
<li>028</li>
<li>029</li>
<li>030</li>
<li>031</li>
<li>032</li>
<li>033</li>
<li>034</li>
<li>035</li>
<li>036</li>
<li>037</li>
<li>038</li>
<li>039</li>
<li>040</li>
<li>041</li>
<li>042</li>
<li>043</li>
<li>044</li>
<li>045</li>
<li>046</li>
<li>047</li>
<li>048</li>
<li>049</li>
<li>050</li>
<li>051</li>
<li>052</li>
<li>053</li>
<li>054</li>
<li>055</li>
<li>056</li>
<li>057</li>
<li>058</li>
<li>059</li>
<li>060</li>
<li>061</li>
<li>062</li>
<li>063</li>
<li>064</li>
<li>065</li>
<li>066</li>
<li>067</li>
<li>068</li>
<li>069</li>
<li>070</li>
<li>071</li>
<li>072</li>
<li>073</li>
<li>074</li>
<li>075</li>
<li>076</li>
<li>077</li>
<li>078</li>
<li>079</li>
<li>080</li>
<li>081</li>
<li>082</li>
<li>083</li>
<li>084</li>
<li>085</li>
<li>086</li>
<li>087</li>
<li>088</li>
<li>089</li>
<li>090</li>
<li>091</li>
<li>092</li>
<li>093</li>
<li>094</li>
<li>095</li>
<li>096</li>
<li>097</li>
<li>098</li>
<li>099</li>
<li>100</li>
</ol>
</div>
</div>
<div class="footer" style="background-color: red;"></div>
</div>
</body>
</html>
示例2：
当我们的内容超出了我们的div，往往会出现滚动条，影响美观。
尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条，也不希望超出去的内容被放逐，就要保留鼠标滚动的效果。
这里介绍一个简单的方法。 大体思路是在div外面再套一个div。这个div设置overflow:hidden。
而内容div设置 overflow-y: scroll;overflow-x: hidden;
然后再设置外层div的width小于内层div的width。
这个内层div其实是会出现滚动条的，所以不影响鼠标的滚动效果，而且我们看不到滚动条了。
内层div效果：
套上外层div效果后：
css代码：
.nav_wrap{
height: 400px;
width: 200px;
overflow: hidden;
border: 1px solid #ccc;
margin: 20px auto;
}
.nav_ul{
height: 100%;
width: 220px;
overflow-y: auto;
overflow-x: hidden;
}
.nav_li{
border: 1px solid #ccc;
margin: -1px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 12px;
width: 200px;
}
.btn_wrap{
text-align: center;
}
html代码：
<div class= "nav_wrap">
<ul class= "nav_ul">
<li class="nav_li">我是菜单1</li>
<li class="nav_li">我是菜单2</li>
</ul>
</div>
之前的一个项目中的菜单用到了这个技巧。那个项目用了iframe。 也是让滚动条被遮住了。
纯css，div隐藏滚动条，保留鼠标滚动效果。的更多相关文章
- 纯css实现隐藏滚动条仍可以滚动
移动端弹出层加了滚动条之后,滚动条一直在,有些不美观,overflow:hidden;虽然可以隐藏滚动条,但是不能滚动.需要实现隐藏滚动条但是仍可以滚动,js实现太麻烦,直接将滚动条隐藏会更好一些. ...
- 纯css解决div隐藏浏览器原生滚动条，但保留鼠标滚动效果的问题
当我们的内容超出了我们的div,往往会出现滚动条,影响美观.尤其是当我们在做一些导航菜单的时候.滚动条一出现就破坏了UI效果. 我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的效 ...
- CSS实现隐藏滚动条并可以滚动内容
方法一: 计算滚动条宽度并隐藏起来,其实我只是把滚动条通过定位把它隐藏了起来,下面给一个简化版的代码: <div class="outer-container"> &l ...
- CSS 实现隐藏滚动条同时又可以滚动（转）
CSS 实现隐藏滚动条同时又可以滚动 移动端页面为了更接近原生的体验,是否可以隐藏滚动条,同时又保证页面可以滚动? 使用 overflow:hidden 隐藏滚动条,但存在的问题是:页面或元素失去了滚 ...
- 前端切图:CSS实现隐藏滚动条同时又可以滚动
CSS 实现隐藏滚动条同时又可以滚动 原始功能: 图片发自简书App 添加伪类之后的功能: 图片发自简书App 完整demo如下: <!DOCTYPE html> <html> ...
- 一个纯CSS DIV天气动画图标【转扒的】
<p> </p> <style><!-- /* SUNNY */ .sunny { -webkit-animation: sunny 15s linear i ...
- DIV+javascript实现首尾相连循环滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- [css]演示：纯CSS实现的右侧底部简洁悬浮效果
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...
- 实现CSS隐藏滚动条并可以滚动内容
隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法. 方法1: ...
随机推荐
- Linux下，PHP扩展安装（使用yum安装）
直接操作linux,在命令模式下用yum 来安装PHP的扩展: 扩展:mysqli 命令: yum install php-mysqli 扩展:pdo 命令: yum install php-pdo
- markdown 表格宽度调整
先在浏览器中看看 HTML是怎样的: 看起来似乎不错.回到 Markdown 上,在原表格前添加 CSS 代码,类似这样: <style> table th:first-of-type ...
- HeadFisrt 设计模式03 装饰者
类应该对扩展开放, 对修改关闭. 所谓装饰者模式, 是指用其他的类来装饰某个类, 装饰者说白了就是使用 has-a 来代替 is-a 隐喻 咖啡店, 有很多种咖啡, 咖啡里还要增加一些 milk, 面 ...
- Java 07 example
留下两个例子作为参考, 1. 追逐小方块的例子 2. HashMap 和 Iterator 的例子 Example one: import acm.graphics.*; import acm.pro ...
- Oracle触发器修改数据时同步执行插入该条数据
原创:lixx ---从UNWIREDATA 表中查询数据,如果该表中地磁状态发生改变(CARDSTATE)执行插入到MAINTABLE 表中---根据唯一值ERID判断,如果ERID值存在,修改该条 ...
- 004杰信-关于formSubmit('factorycreate.action','_self')路径的疑惑
本文材料来源于传智播客,在此说明. 整个项目结构:
- LoadRunner中winsocket协议学习
首先让我们先看一下loadrunner- winsock 函数 一览表: lrs_accept_connection 接受侦听套接字连接 lrs_close_socket 关闭打开的套接 ...
- ASP.NET MVC5 新特性：Attribute路由使用详解
1.什么是Attribute路由?怎么样启用Attribute路由? 微软在 ASP.NET MVC5 中引入了一种新型路由:Attribute路由,顾名思义,Attribute路由是通过Attrib ...
- Android5.0新特性-Material Design
概述 2014年,Google携Android5.X重装归来.全新的UI设计和更加优化的性能,令开发人员眼前一亮 安装和配置Android5.0开发环境 开发Android还得靠AS.下载地址 htt ...
- Spring学习笔记--使用Spring基于Java的配置
我们需要使用@Component注解来定义一个配置类,在配置类中我们定义Bean: package com.moonlit.myspring; import org.springframework.c ...