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的渐变显示、滚动条监听的更多相关文章

  1. JS控制HTML元素的显示和隐藏

    JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 ...

  2. JS控制DIV隐藏显示

    转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...

  3. js控制div样式显示与隐藏，JS通过点击超链接右边（指定位置）显示一个图标

    原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...

  4. 利用来JS控制页面控件显示和隐藏有两种方法

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一:  1 2 document.getEle ...

  5. js 控制Div循环显示 非插件版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. js控制不同的时间段显示不同的css样式

    js控制不同的时间段显示不同的css样式 js函数,可以放到单独的js文件中也可以放到当前页的<head>标记之内 function getCSS(){        datetoday ...

  7. JS控制div跳转到指定的位置的几种解决方案总结

    原文:http://www.jb51.net/article/96574.htm 这篇文章主要介绍了JS控制div跳转到指定的位置的几种解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考 ...

  8. js控制div滚动条，滚动滚动条使div中的元素可见并居中

    1.html代码如下 <div id="panel"> <div id="div1"></div> <div id=& ...

  9. JS 中div内容的显示和隐藏

    1. document.getElementById("dialog-auclot-status").style.display="none";//页面加载时隐 ...

随机推荐

  1. 系统右键添加cmd命令

    我们运行cmd.exe时,会发现刚刚打开时,一般提示在默认路径下: 有时候我们希望直接能够切换到某个路径下运行程序或者做某些工作,那么切换路径可能就会比较麻烦.下面我们介绍一种比较实用的方法,用鼠标右 ...

  2. 网络推广 免费推广产品网站 B2B网站如何推广

    云集网(yunjinet.com)免费发布各类服务和产品信息,在平台上推广你的产品.帮助商家推广优质的产品和服务.如何提高信息的点击量为了提高分类信息网的信息质量,对重复度高.相似度高的信息进行了过滤 ...

  3. pip安装selenium报错：Read timed out

    今天打算把selenium降级重新安装,发现安装时总是失败,报如下错误: raise ReadTimeoutError(self._pool, None, 'Read timed out.') pip ...

  4. Alpha冲刺No.10

    一.站立式会议 我们的阿尔法冲刺也基本宣告血崩,虽然很多功能已经实现,但是并没有串联在一起,好在这周不需要上课,我们也能好好睡一觉 实现手机的定位系统 细化界面设计 解决数据库和软件交互的一些问题 二 ...

  5. C语言的第一次作业总结

    PTA实验作业 题目一:温度转换 本题要求编写程序,计算华氏温度150°F对应的摄氏温度.计算公式:C=5×(F−32)/9,式中:C表示摄氏温度,F表示华氏温度,输出数据要求为整型. 1.实验代码: ...

  6. 敏捷开发每日报告--day4

    1 团队介绍 团队组成: PM:齐爽爽(258) 小组成员:马帅(248),何健(267),蔡凯峰(285)  Git链接:https://github.com/WHUSE2017/C-team 2 ...

  7. 1013团队Beta冲刺day4

    项目进展 李明皇 今天解决的进度 因服务器端未完成登录态维护,故无法进行前后端联动. 明天安排 前后端联动调试 林翔 今天解决的进度 因上课和实验室事务未完成登录态维护 明天安排 完成登录态维护 孙敏 ...

  8. 2017-2018-1 1623 bug终结者 冲刺003

    bug终结者 冲刺003 by 王旌含 今日任务:优化界面布局,提供图片素材 需求 app图标.主界面图.主界面中按钮图:选择关卡图.关卡按键图:游戏中的小人.箱子.地板.墙.目的地:方向按钮:重置按 ...

  9. 操作 numpy 数组的常用函数

    操作 numpy 数组的常用函数 where 使用 where 函数能将索引掩码转换成索引位置: indices = where(mask) indices => (array([11, 12, ...

  10. tornado httpserver

    # coding:utf-8 import tornado.web import tornado.ioloop import tornado.httpserver # 新引入httpserver模块 ...