<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定義滾動條</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="js/jquery-ui.min.js"></script> <script type="text/javascript"> $(function(){ var h = $('.paragraph').outerHeight(); //整體文本的高度減去外面容器的高度 var hide = h-500; $('.scroll_bar').draggable({ axis:'y', containment:'parent', // 限制在父集且y軸上 opacity:0.6, drag:function(ev,ui){ // 使用jqueryUI時候, 滾動事件, 都傳入ev(event),ui var nowtop = ui.position.top; // alert(nowtop) var nowscroll = parseInt(nowtop/290*hide); $('.paragraph').css({top:-nowscroll}); // 此處的計算方式為: /* 剩余文本高度/文本高度 = 剩余滾動空間/總滾動空間. ====>轉化,為保證滾動條大小, 不采用比例方式, 直接用頂線相對於可移動空間的比例對照文本頂線.<====== 滾條top線/整個可以滾動的空間 = 文檔頂部於容器超過的像素/不可見文檔的高度. */ } }); }) </script> <style type="text/css"> .scroll_con{ width:400px; height:500px; border:1px solid #ccc; margin:50px auto 0; position:relative; overflow:hidden; } .paragraph{ width:360px; position:absolute; left:0; top:0; padding:10px 20px; font-size:14px; font-family:'Microsoft Yahei'; line-height:32px; text-indent:2em; } .scroll_bar_con{ width:10px; height:490px; position:absolute; right:5px; /*定位在右邊*/ top:5px; } .scroll_bar{ width:10px; height:200px; background-color:#ccc; position:absolute; left:0; top:0; cursor:pointer; border-radius:5px; } </style> </head> <body> <div class="scroll_con"> <div class="paragraph"> <p> 晚上總是睡不着。凡事須得研究，才會明白。 </p> <p> 他們——也有給知縣打枷過的，也有給紳士掌過嘴的，也有衙役占了他妻子的，也有老子娘被債主逼死的；他們那時候的臉色，全沒有昨天這么怕，也沒有這么凶。 </p> <p> 最奇怪的是昨天街上的那個女人，打他兒子，嘴里說道，“老子呀！我要咬你幾口才出氣！”他眼睛卻看着我。我出了一驚遮掩不住；那青面獠牙的一伙人，便都哄笑起來。陳老五趕上前，硬把我拖回家中了。 </p> <p> 拖我回家，家里的人都裝作不認識我；他們的臉色，也全同別人一樣。進了書房，便反扣上門，宛然是關了一只雞鴨。這一件事，越教我猜不出底細。 </p> 前幾天，狼子村的佃戶來告荒，對我大哥說，他們村里的一個大惡人，給大家打死了；幾個人便挖出他的心肝來，用油煎炒了吃，可以壯壯膽子。我插了一句嘴，佃戶和大哥便都看我幾眼。今天才曉得他們的眼光，全同外面的那伙人一模一樣想起來，我從頂上直冷到腳跟。 </p> <p> 他們會吃人，就未必不會吃我。 </p> <p> 你看那女人“咬你幾口”的話，和一伙青面獠牙人的笑，和前天佃戶的話，明明是暗號。我看出他話中全是毒，笑中全是刀。他們的牙齒，全是白厲厲的排着，這就是吃人的家伙。 </p> <p> 照我自己想，雖然不是惡人，自從踹了古家的簿子，可就難說了。他們似乎別有心思，我全猜不出。況且他們一翻臉，便說人是惡人。我還記得大哥教我做論，無論怎樣好人，翻他幾句，他便打上幾個圈；原諒壞人幾句，他便說“翻天妙手，與眾不同”。我那里猜得到他們的心思，究竟怎樣；況且是要吃的時候。 </p> <p> 凡事總須研究，才會明白。古來時常吃人，我也還記得，可是不甚清楚。我翻開歷史一查，這歷史沒有年代，歪歪斜斜的每葉上都寫着“仁義道德”幾個字。我橫豎睡不着，仔細看了半夜，才從字縫里看出字來，滿本都寫着兩個字是“吃人”！ 書上寫着這許多字，佃戶說了這許多話，卻都笑吟吟的睜着怪眼看我。 </p> <p> 我也是人，他們想要吃我了！ </p> </div> <div class="scroll_bar_con"> <div class="scroll_bar"> </div> </div> </div> </body> </html>