不要再重新發明滾動條了！

網頁並不是分頁的，你可以使用手指來滾動。可你是如何知道瀏覽到哪裡了呢？

在今天的Hacker News上，我發現一兩個（The New Republic uses something like this in a cool way. As you scroll down the ...與I use this on my site.. but for a different reason. Showing scroll location on v...）這樣的討論，在你閱讀時給出一個顯示你進度的指示器。看上去就像下面這樣：

這很漂亮，但是這種轉換並不好，進度條是橫的，但你肯定是豎著閱讀的呀。這是一種錯誤的自然映射（Natural mapping (interface design)）。你往下滾，而進度條是橫的，這很不合理。

Kindle等一些電子閱讀器也有類似的進度條，在屏幕的底部，顯示你的閱讀進度，橫條上還有章節的標記。

在電子閱讀器中，這種進度條是合理的，有明確頁的概念，儘管這些頁可能會重排。但你並不是縱向地瀏覽它們。翻頁是橫向的，所以橫向的進度條沒問題，且符合自然映射。

就是如此，幾十年了，在Web領域我們已經有了一個縱向的進度條，它的學名叫滾動條，你應該聽說過。

你可能會說：

本啊，文章下面的評論怎麼辦，有時候評論甚至是文章的兩倍長，不應該將其刨除么？

對，這很隨機，而且有種很簡單的方式來處理這個問題！

把非文章的內容隱藏起來，直到用戶滾動到那裡。你已經有進度條了，從八十年代起所有人都在用（好吧，可能不是每個人）。

你會問：

這該如何實現啊？

很簡單：（提醒下，這段代碼沒測試過！）

function isScrolledIntoView(elem) { var docViewTop = $(window).scrollTop(); var docViewBottom = docViewTop + $(window).height(); var elemTop = $(elem).offset().top; var elemBottom = elemTop + $(elem).height(); return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));}var commentsElement = $(#comments);$(window).scroll(function() { if(isScrolledIntoView(commentsElement)) { commentsElement.show(); } else { commentsElement.hide(); }});

隨機情況又出現了：

本，使用iOS或者OS X的用戶怎麼辦，用戶不滾動的時候，滾動條會隱藏起來。

不滾動就隱藏，我真心覺得這很噁心。他們最起碼應該提供幾像素做一個可見的提示。唉，只有蘋果自己明白。

有種替代方案，就是忽略iOS和OS X用戶，不過著不太好吧。要不然你就使用滾動條類庫，有很多，比如說jQuery NiceScroll plugin。

或者，你可以自己做一個指示器，就如本文開始提到的。就是別用橫向的指示器來處理縱向的過程。

一篇文章被分成了很多頁，又怎麼辦？

這，你可能碰到了更大的問題，在網頁中一篇文章就不應該被分成多頁！我們有一塊無限的地方讓你寫，還有一種高雅的方式瀏覽它，為毛還要分頁？

為了廣告！

是不是還有其他的變現方式，沒必要強制分頁將廣告甩在用戶臉上吧？

原文：Stop reinventing the scrollbar