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%; width: 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 };
3、滾動條監聽
1.window.scrolltop;對網頁滾動條進行操作
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);