纯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: ...
随机推荐
- elasticsearch安装与使用（1）-- centos7 elasticsearch的两种简单安装方法
转自:http://www.cnblogs.com/miao-zp/p/6003160.html 简单修改 前言 elasticsearch(下面称为ES)是一个基于Lucene的搜索服务器(By 百 ...
- Linux上的free命令简介
每次使用free时都比较迷惑,对于上面的内容一直都不是很清楚,今天仔细查了以下,和大家一起分享以下: 先看一下free的运行结果: free打印出的内存信息主要分为两种,一种是安装的内存,一种是用磁盘 ...
- HDFS Federation客户端(viewfs)配置攻略
转自:http://dongxicheng.org/hadoop-hdfs/hdfs-federation-viewfs/ 1. HDFS Federation产生背景 在Hadoop 1.0中,HD ...
- PHP Global定义全局变量使用说明
Global是php中一个比较特殊的命令,大家直接叫他超级全局变量了,下面我来介绍我今天在使用Global定义全局学习笔记了 很不习惯PHP中的变量作用域,PHP中函数变量和全局是完全隔绝的,也就 ...
- EMPTY表示元素不能包含文本，也不能包含子元素
<?xml version=”1.0″ encoding=”GB2312″?> <!ELEMENT Customer EMPTY> <!ATTLIST Customer称 ...
- USACO4.2.1 网络流最大流算法
/* ID:hk945801 TASK:ditch LANG:C++ */ #include<iostream> #include<cstdio> #include<cs ...
- 《linux系统及其编程》实验课记录（四）
实验4:组织目录和文件 实验目标: 熟悉几个基本的操作系统文件和目录的命令的功能.语法和用法, 整理出一个更有条理的主目录,每个文件都位于恰当的子目录. 实验背景: 你的主目录中已经积压了一些文件,你 ...
- asp.net后台cs中的JSON格式变量在前台Js中调用方法(前后台示例代码)
//后台cs代码: using System; using System.Collections.Generic; using System.Linq; using System.Web; using ...
- 《Programming with Objective-C》第四章 Encapsulating Data
Designated Initializer 不稳定的传送门 合成属性 Properties don’t always have to be backed by their own instance ...
- Mac终端运行java程序
1.编辑源文件HelloWorld.java 2.编译源文件 javac HelloWorld.java 生成HelloWorld.class文件 3.执行java字节码 注意,一定要到源目录下,并且 ...