功能整合（一）：滚动条的变相隐藏、js控制div的渐变显示、滚动条监听
1、滚动条的变相隐藏
思路：
1. 把body的横向，纵向的超出部分隐藏，宽设置100%；高设置100%。就没有body的滚动条了，
2. 然后把最外层的div的宽设置的比body的宽宽一点，把div的滚动条挤出去，并把div的横向超出部分隐藏掉，就可以实现没有滚动条也可以滚动的效果
<html>
<style>
*{
//边距清零
margin: 0;
padding: 0;
}
//隐藏body的滚动条（会没有滚动效果）
.scroll{
overflow-x: hidden;overflow-y: hidden;
}
//将最外层div设置大于body的宽高，并且x轴超出部分隐藏，y方向滚动条在屏幕之外，可滚动
.scroll-son{
height:101%;
width:102%;
overflow-x: hidden;
}
</style>
<body style="height:100%; width: 100%;" class="scroll"> <div style=" background: #ccc; margin: 0 auto;" class="scroll-son">
<div style="background: white;" >
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
</div>
<div>
<p>2</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>2</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
</div>
</div> </body>
</html>
变相隐藏滚动条--示例
2、js控制div的渐变显示
思路：使用定时器调用方法，在方法中将透明度慢慢变小
//页面加载完成
window.onload = function(){
// 定时器，没0.02秒执行一次，并有一个函数名
setInterval(bb,20);
// 一个值赋值给一个变量
var val = 100;
// 运行定时器的那个函数
function bb(){
// 判断那个变量大于等于0的时候就运行下面的方法
if(val >= 0){
// 找到要渐变的那个div
var aa = document.getElementById('sj1_2');
//变量的值 /100 的透明度输出到样式（opacit是透明度）
aa.style.opacity = val/100;
//每次这个变量都减减
val--;
}
}
};
js控制div的渐变显示
3、滚动条监听
1.window.scrolltop;对网页滚动条进行操作
2. var divh = document.getElementById("da").scrollTop; 获取指定div的滚动条高度 ；配合定时器每多少秒获取一次；
//每个页面的滚动条高度
var sz = ["0","139", "769", "1399", "2029", "2659", "2999"];
var k = 1;
var scrollFunc = function (e) {
//"da"为最外层有滚动条的div（body滚动条已隐藏）
var aa = document.getElementById("da");
//找到隐藏的div赋值给dh1
var dh1 = document.getElementById("kjdh");
//隐藏div的左边文本文字的值
var ycdiv1 = document.getElementById("mc");
// 隐藏div的文本文字的class所有文本文字
var ycdiv2 = document.getElementsByClassName("dh3_1_1_1_1"); var e = e || window.event;
if (e.detail > 0||e.keyCode==40) { //当滑轮向下滚动时
aa.scrollTo(0, sz[k]); //滚动后到达的位置 0-x，sz[k]-y；
if (k == 1) {
// 改变被隐藏掉的导航的颜色
dh1.style.background = "linear-gradient(#141414,#1A1A1A)";
//改变前面文本文字的颜色
ycdiv1.style.color = "#9D9D9D";
//改变所有文本文字的颜色
for (var i = 0; i < ycdiv2.length; i++) {
ycdiv2[i].style.color = "#4C4C4C";
}
} //2-4一样
else if (k == 5) {
// 改变被隐藏掉的导航的颜色
dh1.style.background = "linear-gradient(#141414,#1A1A1A)";
//改变前面文本文字的颜色
ycdiv1.style.color = "#9D9D9D";
//改变所有文本文字的颜色
for (var o = 0; o < ycdiv2.length; o++) {
ycdiv2[o].style.color = "#B2B2B2";
}
}
// 数值++
k++;
if (k >= 6) {
k = 6;
}
console.log("向下："+k);
}
if (e.detail < 0||e.keyCode==38) {
//当滑轮向上滚动时
aa.scrollTo(0, sz[k]);
if (k == 1) {
// 改变被隐藏掉的导航的颜色
dh1.style.background = "linear-gradient(#141414,#1A1A1A)";
//改变前面文本文字的颜色
ycdiv1.style.color = "#9D9D9D";
//改变所有文本文字的颜色
for (var i = 0; i < ycdiv2.length; i++) {
ycdiv2[i].style.color = "#4C4C4C";
}
} //2-4一样，手动删除
else if (k == 5) {
// 改变被隐藏掉的导航的颜色
dh1.style.background = "linear-gradient(#141414,#1A1A1A)";
//改变前面文本文字的颜色
ycdiv1.style.color = "#9D9D9D";
//改变所有文本文字的颜色
for (var o = 0; o < ycdiv2.length; o++) {
ycdiv2[o].style.color = "#B2B2B2";
}
}
k--;
if (k < 0 ) {
k = 0;
}
console.log("向上："+k);
}
}
//firefox
document.addEventListener('DOMMouseScroll', scrollFunc, false);
document.addEventListener('keydown', scrollFunc, false);
通过滚动条监听和键盘监听控制页面的滑动定位（只显示当前页面）
功能整合（一）：滚动条的变相隐藏、js控制div的渐变显示、滚动条监听的更多相关文章
- JS控制HTML元素的显示和隐藏
JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 ...
- JS控制DIV隐藏显示
转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...
- js控制div样式显示与隐藏，JS通过点击超链接右边（指定位置）显示一个图标
原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...
- 利用来JS控制页面控件显示和隐藏有两种方法
利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 document.getEle ...
- js 控制Div循环显示 非插件版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js控制不同的时间段显示不同的css样式
js控制不同的时间段显示不同的css样式 js函数,可以放到单独的js文件中也可以放到当前页的<head>标记之内 function getCSS(){ datetoday ...
- JS控制div跳转到指定的位置的几种解决方案总结
原文:http://www.jb51.net/article/96574.htm 这篇文章主要介绍了JS控制div跳转到指定的位置的几种解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考 ...
- js控制div滚动条，滚动滚动条使div中的元素可见并居中
1.html代码如下 <div id="panel"> <div id="div1"></div> <div id=& ...
- JS 中div内容的显示和隐藏
1. document.getElementById("dialog-auclot-status").style.display="none";//页面加载时隐 ...
随机推荐
- java 单向链表实现
1 class Node{//Node类 2 private String data; 3 private Node next; 4 public Node(String data){ 5 this. ...
- PHP-CGI，FASTcgi,php-fpm,之间的关系？
刚开始对这个问题我也挺纠结的,看了<HTTP权威指南>后,感觉清晰了不少.首先,CGI是干嘛的?CGI是为了保证web server传递过来的数据是标准格式的,方便CGI程序的编写者. ...
- hosts文件路径及文件介绍
路径:WINDOWS/system32/drivers/etc/hosts 内容127.0.0.1 localhost 一． Hosts文件的位置 很多用户都知道在Window系统中有个H ...
- 04_Python的数据类型1数值和字符串_Python编程之路
上一节我们通过一个helloworld程序学习python的一些简单操作,还有输入与输出 这节我们来讲Python的数据类型与变量的操作 Python的交互器 在讲这个之前,我要先讲一下python的 ...
- JavaScript(第十六天)【BOM基础】
学习要点: 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM缺少规范,每个浏览器提供商又按照自己想法 ...
- 使用genstring和NSLocalizedString实现App文本的本地化
OS提供了简便的方法来实现本地化,其中用的最多的就是NSLocalizedString. 首先查看下NSLocalizedString是什么: #define NSLocalizedString(ke ...
- 在Windows上安装「算法 第四版」组件
这篇文档将向你介绍如何在Windows系统上安装本书将用到的Java开发环境,同时我们也提供了一个手把手的.使用我们提供的DrJava工具或者用命令行来创建.编译和运行你的第一个Java程序的手册,这 ...
- slf4j 与 log4j2 实战讲解与日志分割
这两天搭建项目的时候用到log4j2在这里把自己的问题与了解拿出来与大家分享一下. 1.为什我要用 因为,使用slf4j可以很好的保证我们的日志系统具有良好的兼容性,兼容当前常见几种日志系统,而使用l ...
- Mego开发文档 - 事务
事务 事务允许以原子方式处理多个数据库操作.如果事务已提交,则所有操作都已成功应用于数据库.如果事务回滚,则没有任何操作应用于数据库. 默认行为 默认情况下,如果数据库提供程序支持事务,则单次的提交操 ...
- python入门（7）Python程序的风格
python入门(7)Python程序的风格 Python采用缩进方式,写出来的代码就像下面的样子: # print absolute value of an integer: a = 100 if ...