纯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: ...
随机推荐
- jQuery分页小插件
源码如下: $.fn.pager = function (pagerInfo) { var recordCount = this.size(); if (recordCount <= pager ...
- Linux 高频工具快速教程
全书分为三个部分: 第一部分为基础篇,介绍我们工作中常用的工具的高频用法: 第二部分为进阶篇,介绍的工具更多的适合程序员使用,分为程序构建.程序调试及程序优化: 第三部分是工具参考篇,主要介绍实用工具 ...
- 第二百七十九节，MySQL数据库-pymysql模块操作数据库
MySQL数据库-pymysql模块操作数据库 pymysql模块是python操作数据库的一个模块 connect()创建数据库链接,参数是连接数据库需要的连接参数使用方式: 模块名称.connec ...
- FormData异步上传
1.代码片段一: ajaxUpload: function () { var url = this.$avatarForm.attr('action'), data = new FormData(th ...
- 开发中常用Fel的写法
直接看代码吧: package javademo; import java.util.HashMap;import java.util.Map; import com.greenpineyu.fel. ...
- Gradle 模板配置
对于新手配置Gradle是一件很痛苦的事,记住二句话绝对搞定 1.在Gradle-->gradle-wrapper.properties中配置distributionUrl=https\://s ...
- Echarts 的悬浮框tooltip显示自定义格式化
最近做的项目用到echarts雷达图,但是由于地市过多,遇到悬浮框显示问题被遮住 如图: 可以看到上面从兴安开始数据就被遮住了 为了解决这个被遮住的悬浮框,达到tooltip自定义格式 完成后的效果如 ...
- 基于 Golang 的 xls 读取类库：xls
Golang 编写的 xls 读取类库,能够实现 xls 表格的读取功能 func (w *WorkBook) ReadAllCells() (res [][]string) { for _, she ...
- innerHTML 延后执行？
时常会觉得 innerHTML 可能有延后执行的情况,比如下面代码: document.body.innerHTML = 'something'; alert('something else'); 明 ...
- spring配置文件注解方式引入的两种方式
一.#{beanID['propertiesName']}方式 <bean id="propertyConfigurer" class="org.springfra ...