纯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: ...
随机推荐
- 数据库 proc编程三
#define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> #include <stri ...
- C++ 类的对象管理模型初讲
//类的对象管理模型初讲 #include<iostream> using namespace std; class PointA{ private: int x;//占据4个字节大小的内 ...
- $ -----JavaScript 中美元符号 $ 的作用
JavaScript 中美元符号 $ 是什么 1.首先可以用来表示变量,比如变量 var s='asdsd'或var $s='asdasd'; 2.在正则表达式中,它可以匹配结尾:/sa$/.test ...
- jenkins发布docker到mesos
1.前提是装好git.SSH.maven插件 2.jenkins新建一个项目,配好git拉取代码.maven编译构建(gradle构建也行,这不重要) 3.SSH Server,填写需要传输的jar文 ...
- jboss6.4 域模式自动部署
1.通过jenkins传递部署包到服务器,调用自动部署shell完成jboss6.4的域模式部署: 2.自动部署shell如下: 完成部署包重命名(从jenkins过来的包可能没有改名:). 调用jb ...
- HDU4081 Qin Shi Huang's National Road System【prim最小生成树+枚举】
先求出最小生成树,然后枚举树上的边,对于每条边"分别"找出这条割边形成的两个块中点权最大的两个 1.因为结果是A/B.A的变化会引起B的变化,两个制约.无法直接贪心出最大的A/B. ...
- open() 函数以 r+ 模式打开文件
第一种用法:如果我们对文件进行写操作,则默认会从第一行开始写,且直接覆盖第一行的内容 [root@localhost ~]$ cat 1.txt # 文件内容如下 aaa bbb ccc In [1] ...
- iOS：友盟SDK第三方登录 分享及友盟统计的使用
本文转载至 http://www.it165.net/pro/html/201503/37101.html Tag标签:第三方 01.#import "UMSocial.h" ...
- 重启svn
重启svn svnserve -d -r /svn -d表示后台运行 -r 指定根目录是 /u02/svn
- vue-router scrollBehavior无效的问题
在使用vue做单页面应用开发时候 使用vue-router作为路由控制器 在使用过程中发现每个页面打开都在原来的位置 不能返回到页面顶部位置 ,然后查看api文档 滚动行为 发现如下代码: con ...