標籤：
現在手機上的文本閱讀app已經非常豐富，良好的閱讀體驗與海量的書庫常常令我感到無比興奮。
我想到8年前用一點幾寸螢幕的mp3看電子書的情景，頓生一種淡淡的溫馨。再久遠一些，小的時候，我也經常和小夥伴們組團去書店看白書，也就是白看書。古老的木質書架上那一疊疊厚重的黃皮小說書，在年幼的我們眼裡彷彿是比盤子裡的午餐肉更加美味可口的東西。
而在當今這個資訊化的時代，看書變得空前的便利，可是兒時那種期待和興奮的感受卻消失在了時間的長河。
歲月在流逝，時代在進步。
願放下所有的浮躁，在新的時代愉快地生活，無所謂明天怎樣，我都相信肯定比今天更好。
本文以一個網頁版閱讀器作為案例，展示JavaScript中，對捲軸的一些處理，這是完成以後的樣子：
當我捲軸往上滾動的時候，螢幕右下角會出現一個向上的箭頭：
而往下滾動的時候，又自動消失。
當我點擊這個半透明的箭頭按鈕，就會自動滑動到章節的最頂端。
本章就實現這個小功能。
開發工具：HBuilder（個人喜歡，順從潮流放棄了使用大半年的EditPlus，不過EditPlus確實鍛煉了我拼字單詞的能力）
測試環境：Google瀏覽器
本文
1. 頁面配置與繪製
我們寫一個基本的html模板
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>TextReader</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style type="text/css"> *{ padding: 0; margin: 0; } </style> </head> <body> </body></html>
接著，我們把背景圖片引入進來（尺寸略有調整）：
body{ background: url(bg.jpg) no-repeat; background-size: 100%;}
我們先寫一個div，作為盛放整個手機的父容器。
在它的css樣式中，我們做了置中定位（水平）。
.phone { width:322px ; height:550px; position:relative; left:35%; top:35px; background: #66CC00;}
<div class=‘phone‘></div>
接下來，引入上下兩端的樣式圖片。
其實，手機的頂部和底部就是兩張圖片：
我們先把頂部圖片引入進來，在引入圖片之前，先畫兩個div來盛放圖片。
<body> <div class=‘phone‘> <div class=‘phone_top‘></div> <div class=‘phone-bottom‘></div> </div></body>
然後，通過背景圖的方式把圖片貼進來。
.phone .phone_top { background: url(phone_top.png); height:42px;}.phone .phone-bottom { background: url(phone_bottom.png); position: absolute; height: 42px; width: 100%; bottom: 0;}
這樣一來，一個手機的大概模子就出來了，接下來，我們把螢幕地區加上去。
.phone .container{ overflow-x: hidden; overflow-y: auto; width:90%; background:#ccc; height:456px; font-size:14px; text-align:left; background:#dcf3dc; font-family:微軟雅黑; color:#555; line-height:28px; padding:16px; text-indent: 2em; padding: 16px 16px 0px 16px;}
<body> <div class=‘phone‘> <div class=‘phone_top‘></div> <div class=‘container‘></div> <div class=‘phone-bottom‘></div> </div></body>
OK，現在可以把父容器的背景色給去掉了。
background: #66CC00; //去掉
為了把手機模型做得更像一點，我們手動給它加一個按鈕，額，就手動畫一個吧。
.back { width: 30px; height: 30px; position: absolute; left: 50%; margin-left: -15px; border: 2px solid #c7bcbc; top: 4px; border-radius: 50%;}
<div class=‘phone-bottom‘> <span class=‘back‘></span></div>
雖然span是行內元素，但是因為我們給它設定了 position: absolute ， 所以寬度和高度依然是起作用的。
我也是在寫這個案例的時候無意中發現的，我以前一直以為需要手動給行內元素升級為區塊層級元素才行。
這樣，我們的頁面配置差不多久完成啦。
2. 文字部分設計與美化
接下來，我們給閱讀器類比一些資料。
<body> <div class=‘phone‘> <div class=‘phone_top‘></div> <div class=‘container‘> <h4>刀劍神域 </h4> <p> 在一群好奇心旺盛的高手花了整整一個月測量後，發現最底層地區的直徑大約有十公裡，足以輕鬆容納下整個世田谷區。再加上堆積在上面百層左右的樓層，其寬廣的程度可說超乎想像。整體的檔案量大到根本無法測量。 這樣的空間內部有好幾個都市、為數眾多的小型街道與村落、森林和草原，甚至還有湖的存在。而串連每個樓層之間的階梯只有一座，階梯還都位於充斥怪物的危險迷宮地區之中，因此要發現並通過階梯可以說是相當困難。但只要有人能夠突破阻礙抵達上面的樓層，上下層各都市的「轉移門」便會連結起來，人們也就可以自由來去兩個樓層之間。 </p> <p> 經過兩年的時間，這個巨大城堡就這樣被逐漸地往上攻略，目前已到達第七十四層。城堡的名稱是「艾恩葛朗特」。這座持續飄浮在空中、吞噬了將近六千人，充滿著劍與戰鬥的世界。它的另一個名字是——SwordArtOnline刀劍神域」。閃爍著深灰色光芒的劍尖，淺淺地划過我的肩膀。 那固定顯示在視線左上方的細長橫線，好不容易縮短了長度。同時，似乎有只冰冷的手掌，撫摸過我胸口深處。 </p> <p> 橫線——那稱為HP條的藍色條狀物，可以看出我的生命殘值。雖然它還有八成左右的殘值，但不能把事情看得太過於樂觀。因為相對來說，我已經朝死亡深淵前進了兩步。 在敵人的劍再度進入攻擊動作之前，我就先往後跳開一大步，以保持與敵人之間的距離。 </p> <p>「呼……」 </p> <p>硬是吐了一大口氣來調整一下氣息。在這個世界的「身體」雖然不需要氧氣，但在另一邊，也就是躺在真實世界裡的真正身體，現在呼吸應該非常劇烈。而隨意擺放的手應該正流著大量冷汗，心跳也加速到破表了吧。 </p> <p>這也是理所當然的事。就算我眼前所見全部都是虛擬立體影像對象，減少的也只是數值化的生命值，但我現在的確是賭上自己的性命在戰鬥。 從賭上性命這點來看，這場戰鬥真是相當不公平。因為，眼前的「敵人」——這除了擁有閃耀著光芒的深綠鱗片皮膚與長手臂外，還有著蜥蜴頭與尾巴的半人半獸怪物，不只外表不是人類、甚至沒有真實的生命。它只不過是不論被殺掉多少次，都可以由系統無限重生的數字檔案檔案集合體。 </p> <p>不對。 目前，操縱這隻蜥蜴人的AI程式正在觀察、學習我的戰鬥方式，用以不斷提升自己的應對能力。但這些學習檔案，在該個體消滅後便會重設，而且不會反饋到下次出現在這個地區的同種個體上。 </p> </div> <div class=‘phone-bottom‘> <span class=‘back‘></span> </div> </div></body>
捲軸的樣式不太美觀，我們將其美化一下
/** 捲軸樣式美化 */
::-webkit-scrollbar{width:5px;height:6px;background:#ccc;}::-webkit-scrollbar-button{background-color:#e5e5e5;}::-webkit-scrollbar-track{background:#999;}::-webkit-scrollbar-track-piece{background:#ccc}::-webkit-scrollbar-thumb{background:#666;}::-webkit-scrollbar-corner{background:#82AFFF;}::-webkit-scrollbar-resizer{background:#FF0BEE;}scrollbar{-moz-appearance:none !important;background:rgb(0,255,0) !important;}scrollbarbutton{-moz-appearance:none !important;background-color:rgb(0,0,255) !important;}scrollbarbutton:hover{-moz-appearance:none !important;background-color:rgb(255,0,0) !important;}
這樣就好看多了。
標題部分有一點突兀，我們給出四條美化的建議：
1. 標題居靠左對齊
2. 底部畫一條線，與小說本文分開，並且空開一些。
3. 字型顏色稍微淡一些，不要太黑
4. 字間稍微距大一些
於是
.phone .container h4 { text-indent: 0; margin-bottom: 1em; color:#736357; border-bottom:1px solid #736357; letter-spacing: 2px;}
這樣好看一些了吧，當然，每個人審美觀不同啦，你也可以調成自己喜歡的樣式。
段落之間和文字間距都太小了，我們也調一下，不要那麼小氣嘛，哈哈。
.phone .container p { margin-bottom: 15px; letter-spacing: 2px;}
恩，好多了。
3. 引入向上的箭頭表徵圖
我們準備了一張半透明的箭頭表徵圖，現在將其引入。
<body> <div class=‘phone‘> <div class=‘phone_top‘></div> <div class=‘container‘> <span id=‘toTop‘></span> <h4>刀劍神域</h4> <p> 在一群好奇心旺盛的高手花了整整一個月測量後，發現最底層地區的直徑大約有十公裡，足以輕鬆容納下整個世田谷區。再加上堆積在上面百層左右的樓層，其寬廣的程度可說超乎想像。整體的檔案量大到根本無法測量。 這樣的空間內部有好幾個都市、為數眾多的小型街道與村落、森林和草原，甚至還有湖的存在。而串連每個樓層之間的階梯只有一座，階梯還都位於充斥怪物的危險迷宮地區之中，因此要發現並通過階梯可以說是相當困難。但只要有人能夠突破阻礙抵達上面的樓層，上下層各都市的「轉移門」便會連結起來，人們也就可以自由來去兩個樓層之間。 </p> <p> 經過兩年的時間，這個巨大城堡就這樣被逐漸地往上攻略，目前已到達第七十四層。城堡的名稱是「艾恩葛朗特」。這座持續飄浮在空中、吞噬了將近六千人，充滿著劍與戰鬥的世界。它的另一個名字是——SwordArtOnline刀劍神域」。閃爍著深灰色光芒的劍尖，淺淺地划過我的肩膀。 那固定顯示在視線左上方的細長橫線，好不容易縮短了長度。同時，似乎有只冰冷的手掌，撫摸過我胸口深處。 </p> <p> 橫線——那稱為HP條的藍色條狀物，可以看出我的生命殘值。雖然它還有八成左右的殘值，但不能把事情看得太過於樂觀。因為相對來說，我已經朝死亡深淵前進了兩步。 在敵人的劍再度進入攻擊動作之前，我就先往後跳開一大步，以保持與敵人之間的距離。 </p> <p>「呼……」 </p> <p>硬是吐了一大口氣來調整一下氣息。在這個世界的「身體」雖然不需要氧氣，但在另一邊，也就是躺在真實世界裡的真正身體，現在呼吸應該非常劇烈。而隨意擺放的手應該正流著大量冷汗，心跳也加速到破表了吧。 </p> <p>這也是理所當然的事。就算我眼前所見全部都是虛擬立體影像對象，減少的也只是數值化的生命值，但我現在的確是賭上自己的性命在戰鬥。 從賭上性命這點來看，這場戰鬥真是相當不公平。因為，眼前的「敵人」——這除了擁有閃耀著光芒的深綠鱗片皮膚與長手臂外，還有著蜥蜴頭與尾巴的半人半獸怪物，不只外表不是人類、甚至沒有真實的生命。它只不過是不論被殺掉多少次，都可以由系統無限重生的數字檔案檔案集合體。 </p> <p>不對。 目前，操縱這隻蜥蜴人的AI程式正在觀察、學習我的戰鬥方式，用以不斷提升自己的應對能力。但這些學習檔案，在該個體消滅後便會重設，而且不會反饋到下次出現在這個地區的同種個體上。 </p> </div> <div class=‘phone-bottom‘> <span class=‘back‘></span> </div> </div></body>
樣式如下：
.phone .container #toTop { width: 40px; height: 60px; display: inline-block; position: absolute; background: url(top.png) no-repeat; background-size: 100%; bottom:80px; right: 15px; opacity: 0.7;}
引進來了。
4. js控制
我們通過jQuery的animate方法來實現回到頂部的動畫，實現該功能的核心邏輯就是控制捲軸距離頂部的高度，也就是scrollTop，讓它變為0就可以了。
//單機表徵圖直接返回頂部
$(‘#toTop‘).on(‘click‘,function(){ $(‘.phone .container‘).eq(0).stop(true, true).animate({ scrollTop: 0},500,function(){ $(‘#toTop‘).css({‘opacity‘ : 0}); }); return false;});
最後，我們還希望實現的一個效果就是，只有在捲軸往上拖動的時候，才把按鈕顯示出來，否則就隱藏該按鈕。畢竟，我們在閱讀的時候都不希望一直有個小表徵圖吧。
實現思路也很簡單，就是判斷當前捲軸到底是向上滾動呢，還是向下滾動？
然後設定按鈕的透明度就行了，這時候，我們需要對捲軸進行監聽，如果向上滾動就顯示按鈕，否則隱藏按鈕，實現代碼如下：
var justScrollTop = 0; //記錄上一次捲軸距離頂部的位置
//捲軸監聽事件
$(‘.phone .container‘).on(‘scroll‘,function(e){ if(e.target.scrollTop > justScrollTop){ $(‘#toTop‘).css({‘opacity‘ : 0}); //隱藏 }else{ $(‘#toTop‘).css({‘opacity‘ : 0.8}); //顯示 } justScrollTop = e.target.scrollTop;});
效果：
原文連結 http://www.jianshu.com/p/0d12a945f0d6#
javascript實現移動端網頁版閱讀器
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
