自定義滾動條的原理其實也是拖拽。
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style> #parent{width: 20px; height: 600px; background: gray;position: relative;float: right; margin-right: 100px;} #div1{width: 20px; height: 20px; background: red;position: absolute;} #box{width: 500px;height: 500px; border: 2px solid black;float: right;position: relative;overflow: hidden;} #container{position: absolute; left:0px; top: 0px;} </style> </head> <body> <div id = "parent"> <div id = "div1"></div> </div> <div id = "box"> <div id = "container">搬血：需調動全身精血，滾滾如雷鳴，熔煉骨文，在血液中催發出神曦，從而淬煉天地造化，滋養肉身。最高可使肉身達至十萬斤極境 洞天：開辟洞天等於是奪了天地造化，不斷直接吸收外界神精，補充己身。最多可有十大洞天，荒將十大洞天合一化為唯一無上洞天=遮天輪海秘境前身 化靈：重塑真我過程，與以往不同的蛻變，從肉身到精神，再到溝通外界的洞天，產生靈性，都將演變 銘紋（候）：不再徹底借鑒凶獸和猛禽的符文，能在體內銘刻自己一些符號 列陣（王）：若說銘紋境是模仿其他種族，在體內刻下符文，能初步推演法，那它就是更高層次進化。能在體內刻下各種殺陣，如先天混沌大陣和曹雨生體內的第三殺陣 尊者（人皇）：平凡修士中的極致，超脫世俗，有成神可能 神火（偽神）：點燃神火，超脫凡人，能在體內種下道種。晚年時神火可能熄滅 真一（真神）：真神靈，擁有超脫世俗的力量。真正點燃神火，神火死后才會熄滅 聖祭：特殊過渡境界，前期法力不穩定，在神火境和天神境之間變動，修煉至后期較穩定。它能直接跳過不修煉，如果修煉日后能順風順水。它可度神王劫 天神：能斷肢再生，一滴血能崩塌山脈，它威壓可蓋一切低境界。它是進入帝關戰場的最低資格 虛道（教主）：與道交融，以完美種子為媒介，觸摸大道，能感悟天地間的妙理，第一次跟道全面接觸，甚至給人以錯覺，宛若化身成天地大道，觸摸道的源頭 斬我：全稱斬我明道境，斬掉己身，明悟自己的道與法 遁一：統領一方的修士，帝關戰場首領人物 至尊（無敵者）：矗立於人道絕巔僅是散發威壓便令低境界抬不起頭，依靠長生物質能活上數百萬年或更久。對應遮天境界中的大帝。至尊巔峰擁有天帝級別的戰力，如石昊在走出自己的道突破半個境界后，即是天帝級別。每個時代最強的至尊可以融合天心，后來成道的至尊不能融合天心，被稱為另類成道，有的強者甚至可以戰敗融合天心的至尊，但一般實力不如。八世至尊依然屹立在至尊境界但卻擁有着仙的戰力與不死不老的仙的特點。 真仙（不朽者，長生者）：一滴血能保持數個紀元不滅，它戰力不如這層次的紅塵仙 仙王（不朽之王，葬王）真正長生不死，肉身不朽，元神不滅，修成仙王體能讓體魄更強。極難殺死，除非用特殊方法。若有人念其真名就會被他們感知，會有異象顯化。具體可划分為准仙王、十凶層次、一般仙王、絕頂仙王、仙王絕顛、巨頭、無上巨頭、仙王極限（如九頭怪）、無上仙王極限（如十九頭怪）、接近准仙帝的仙王 已知仙王：鯤鵬王、九葉劍草、蛄祖、老真龍、天下第二、赤龍、小螞蟻、白麒麟；九天無終、輪回、仙僧王、仙金道人、邊荒七王、黑暗柳神、孟天正、王長生、石毅、天子、謫仙、小石頭；仙域盤王、混元、敖晟、太始、元初、與荒對峙的六仙王、阿蠻師傅、禁區之主、金色骨掌、水晶頭骨、滴血眼球、斬殺洛摩的女子、金毛犼王、虎烏怪、白虎王、三尊金烏王、魯谷、老怪物、混沌青蓮、齊虞、九頭怪、屠夫、賣假葯；葬域霍恆、翰卓、養雞、葬主；異域洛摩、鶴無雙、無殤、蒲魔王、赤王、俞陀、安瀾、紫金葫蘆主人、五張法旨代表、吞天老祖、昆諦；界海瞿忡、刀王、墮落古獸、十九頭怪 仙帝（仙道至尊，不朽之帝，葬帝）：它分為准仙帝和仙帝兩大階段，可煉制仙源，封印仙道高手，彈指間毀滅一界域。從古至今走上這條路的有九多成斃命。准仙帝自身就蒙蔽天機，無論過去、現在或殞落后都帶着迷霧，讓人難以看透，荒和滅世老人所謂的蛻變，強大而完滿的軀體，不能長期保持住。想要真正圓滿走向仙帝境，是非常危險的，這條路艱險到讓人絕望。仙帝獨有的帝之場域，能逆溯時間將敵人限制在寂靜時空中，脫離不了這個點。紅塵仙是大段位囊括完美所有仙的境界 已知准仙帝：腳印帝、柳神、葉凡、狠人、無始、段德、蒼帝、鴻帝、羽帝、滅世老人、未來三帝 已知仙帝：屍骸仙帝、荒天帝 超越仙帝一到兩個大境界：結局獲知存在上蒼之上，上蒼流出的一滴黑血就能輕易侵蝕屍帝到死，說明黑血的主人實力是多么恐怖 已知超越仙帝：黑血主人</div> </div> <script type="text/javascript"> var oDiv = document.getElementById('div1'); var oParent = document.getElementById('parent'); var oContainer = document.getElementById('container'); var oBox = document.getElementById('box'); oDiv.onmousedown = function(ev){ var oEvent = ev||event; //獲取鼠標點擊在div上的y軸坐標 var disY = oEvent.clientY - oDiv.offsetTop; document.onmousemove = function(ev){ var oEvent = ev||event; var t = oEvent.clientY - disY; //獲取滾動條比例，再減掉文本容器的邊框大小 var scale = oDiv.offsetTop/(oParent.offsetHeight-oDiv.offsetHeight-4); if(t<0) { t = 0; } else if(t>(oParent.offsetHeight-oDiv.offsetHeight)) { t = oParent.offsetHeight-oDiv.offsetHeight; } oDiv.style.top = t + 'px'; oContainer.style.top = -scale * (oContainer.offsetHeight - oBox.offsetHeight) + 'px';//按比例滾動條滾到哪個位置文本滾到對應的 } document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; } return false;//阻止默認事件 } oBox.onmousewheel = function(ev){ oEvent = ev||event; var t = oDiv.offsetTop;//剛開始的時候此時t = 0 var scale = 0; if(oEvent.wheelDelta) { if(oEvent.wheelDelta>0)//滾輪往上 { oDiv.style.top = t - 20 + 'px'; t = oDiv.offsetTop; //alert(t);//t = 0; if(t<0) { oDiv.style.top = 0 + 'px'; } scale = oDiv.offsetTop/(oParent.offsetHeight-oDiv.offsetHeight-4); oContainer.style.top = -scale * (oContainer.offsetHeight - oBox.offsetHeight) + 'px'; } else if(oEvent.wheelDelta<0)//滾輪往下 { oDiv.style.top = t + 20 + 'px'; t = oDiv.offsetTop; if(t>oParent.offsetHeight-oDiv.offsetHeight) { oDiv.style.top = oParent.offsetHeight-oDiv.offsetHeight + 'px'; } scale = oDiv.offsetTop/(oParent.offsetHeight-oDiv.offsetHeight-4); oContainer.style.top = -scale * (oContainer.offsetHeight - oBox.offsetHeight) + 'px'; } } return false;//阻止默認事件(阻止滾動主界面滾動條) } oBox.addEventListener('DOMMouseScroll',function(ev){ var oEvent = ev||event; var t = oDiv.offsetTop; var scale = 0; if(oEvent.detail)//火狐 { if(oEvent.detail<0)//向上滾 { oDiv.style.top = t - 20 + 'px'; t = oDiv.offsetTop; //alert(t);//t = 0; if(t<0) { oDiv.style.top = 0 + 'px'; } scale = oDiv.offsetTop/(oParent.offsetHeight-oDiv.offsetHeight-4); oContainer.style.top = -scale * (oContainer.offsetHeight - oBox.offsetHeight) + 'px'; } else if(oEvent.detail>0)//向下滾 { oDiv.style.top = t + 20 + 'px'; t = oDiv.offsetTop; if(t>oParent.offsetHeight-oDiv.offsetHeight) { oDiv.style.top = oParent.offsetHeight-oDiv.offsetHeight + 'px'; } scale = oDiv.offsetTop/(oParent.offsetHeight-oDiv.offsetHeight-4); oContainer.style.top = -scale * (oContainer.offsetHeight - oBox.offsetHeight) + 'px'; } } oEvent.preventDefault();//阻止瀏覽器默認事件 /*oEvent.cancelBubble = true; oEvent.stopPropagation(); return false;*/ },false); </script> </body> </html>