功能整合（一）：滚动条的变相隐藏、js控制div的渐变显示、滚动条监听
分类:
IT文章
•
2022-05-25 10:57:23
1、滚动条的变相隐藏
思路：
1. 把body的横向，纵向的超出部分隐藏，宽设置100%；高设置100%。就没有body的滚动条了，
2. 然后把最外层的div的宽设置的比body的宽宽一点，把div的滚动条挤出去，并把div的横向超出部分隐藏掉，就可以实现没有滚动条也可以滚动的效果
![]()
1 <html>
2 <style>
3 *{
4 //边距清零
5 margin: 0;
6 padding: 0;
7 }
8 //隐藏body的滚动条（会没有滚动效果）
9 .scroll{
10 overflow-x: hidden;overflow-y: hidden;
11 }
12 //将最外层div设置大于body的宽高，并且x轴超出部分隐藏，y方向滚动条在屏幕之外，可滚动
13 .scroll-son{
14 height:101%;
15 width:102%;
16 overflow-x: hidden;
17 }
18 </style>
19 <body style="height:100%; 100%;" class="scroll">
20
21 <div style=" background: #ccc; margin: 0 auto;" class="scroll-son">
22 <div style="background: white;" >
23 <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>
24 </div>
25 <div>
26 <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>
27 </div>
28 </div>
29
30 </body>
31 </html>
变相隐藏滚动条--示例
2、js控制div的渐变显示
思路：使用定时器调用方法，在方法中将透明度慢慢变小
![]()
1 //页面加载完成
2 window.onload = function(){
3 // 定时器，没0.02秒执行一次，并有一个函数名
4 setInterval(bb,20);
5 // 一个值赋值给一个变量
6 var val = 100;
7 // 运行定时器的那个函数
8 function bb(){
9 // 判断那个变量大于等于0的时候就运行下面的方法
10 if(val >= 0){
11 // 找到要渐变的那个div
12 var aa = document.getElementById('sj1_2');
13 //变量的值 /100 的透明度输出到样式（opacit是透明度）
14 aa.style.opacity = val/100;
15 //每次这个变量都减减
16 val--;
17 }
18 }
19 };
js控制div的渐变显示
2. var divh = document.getElementById("da").scrollTop; 获取指定div的滚动条高度 ；配合定时器每多少秒获取一次；
![]()
1 //每个页面的滚动条高度
2 var sz = ["0","139", "769", "1399", "2029", "2659", "2999"];
3 var k = 1;
4 var scrollFunc = function (e) {
5 //"da"为最外层有滚动条的div（body滚动条已隐藏）
6 var aa = document.getElementById("da");
7 //找到隐藏的div赋值给dh1
8 var dh1 = document.getElementById("kjdh");
9 //隐藏div的左边文本文字的值
10 var ycdiv1 = document.getElementById("mc");
11 // 隐藏div的文本文字的class所有文本文字
12 var ycdiv2 = document.getElementsByClassName("dh3_1_1_1_1");
13
14 var e = e || window.event;
15 if (e.detail > 0||e.keyCode==40) { //当滑轮向下滚动时
16 aa.scrollTo(0, sz[k]); //滚动后到达的位置 0-x，sz[k]-y；
17 if (k == 1) {
18 // 改变被隐藏掉的导航的颜色
19 dh1.style.background = "linear-gradient(#141414,#1A1A1A)";
20 //改变前面文本文字的颜色
21 ycdiv1.style.color = "#9D9D9D";
22 //改变所有文本文字的颜色
23 for (var i = 0; i < ycdiv2.length; i++) {
24 ycdiv2[i].style.color = "#4C4C4C";
25 }
26 } //2-4一样
27 else if (k == 5) {
28 // 改变被隐藏掉的导航的颜色
29 dh1.style.background = "linear-gradient(#141414,#1A1A1A)";
30 //改变前面文本文字的颜色
31 ycdiv1.style.color = "#9D9D9D";
32 //改变所有文本文字的颜色
33 for (var o = 0; o < ycdiv2.length; o++) {
34 ycdiv2[o].style.color = "#B2B2B2";
35 }
36 }
37 // 数值++
38 k++;
39 if (k >= 6) {
40 k = 6;
41 }
42 console.log("向下："+k);
43 }
44 if (e.detail < 0||e.keyCode==38) {
45 //当滑轮向上滚动时
46 aa.scrollTo(0, sz[k]);
47 if (k == 1) {
48 // 改变被隐藏掉的导航的颜色
49 dh1.style.background = "linear-gradient(#141414,#1A1A1A)";
50 //改变前面文本文字的颜色
51 ycdiv1.style.color = "#9D9D9D";
52 //改变所有文本文字的颜色
53 for (var i = 0; i < ycdiv2.length; i++) {
54 ycdiv2[i].style.color = "#4C4C4C";
55 }
56 } //2-4一样，手动删除
57 else if (k == 5) {
58 // 改变被隐藏掉的导航的颜色
59 dh1.style.background = "linear-gradient(#141414,#1A1A1A)";
60 //改变前面文本文字的颜色
61 ycdiv1.style.color = "#9D9D9D";
62 //改变所有文本文字的颜色
63 for (var o = 0; o < ycdiv2.length; o++) {
64 ycdiv2[o].style.color = "#B2B2B2";
65 }
66 }
67 k--;
68 if (k < 0 ) {
69 k = 0;
70 }
71 console.log("向上："+k);
72 }
73 }
74 //firefox
75 document.addEventListener('DOMMouseScroll', scrollFunc, false);
76 document.addEventListener('keydown', scrollFunc, false);
