Google如何製作滾動條？

Question

我只是在http://www.google.com/finance和注意到在頁面中間一個真棒尋找滾動條。

Google如何創建此滾動條外觀/感覺？

注意：此滾動條與Google使用的Wave產品不同。

Screenshot

UPDATE：

滾動條不會立即出現。不要刷新頁面。讓該頁面暫時理想化，直到世界上有新的新聞報道。一旦出現新的新聞報道，新文章將導致滾動條出現。

Answer 1

不是我可以看到它，但我想象一個由各種圖像製成的自定義控件。

您製作一個磁貼圖像，用於組成背景，頂部和底部的蓋帽圖像以充當向前/向後按鈕（懸停和按下狀態），可移動控件通常由三部分組成，在一個可以調整大小以適合花木的中心區域的任一側。然後，您監控控制區域上的拖動並將其保持在軌道內，並在前進/後退按鈕上單擊（或更好地拖動）。

有類似jQuery UI Slider這樣的庫可以爲你處理這個問題，如果你不想自己編寫它。

Answer 2

非常有趣的問題。我只是有空閒時間，花了它來實現這個簡單的例子（花了大約1小時，一杯茶與糖果;））。看看這個：

<script src='jquery.js'></script> 
<script src='jquery-ui.js'></script> 

<style> 
.frame { 
    position: relative; 
    top: 150px; 
    left: 150px; 
    width: 500px; 
    height: 500px; 
    overflow: hidden; 
    border: 1px solid black; 
} 

.frame > div { 
    border: 1px solid black; 
} 

.frame .content { 
    margin-right: 0px; 
    height: 498px; 
    overflow: hidden; 
} 

.frame .scrollbar { 
    float: right; 
    width: 20px; 
    text-align: center; 
} 
.frame .scrollbar .scroller { 
    position: relative; 
    border-right: 1px solid black; 
    width: 10px; 
    height: 91.8%; 
} 
.frame .scrollbar .scroll-up, .frame .scrollbar .scroll-down { 
    cursor: pointer; 
} 
.frame .scrollbar .scroll-up:hover, .frame .scrollbar .scroll-down:hover { 
    background: blue; 
    color: White; 
} 

.frame .scroller-draggable { 
    background: #EEF1F7; 
    border: 1px solid #D5DFF3; 
    height: 20px; 
    margin-left: 1px; 
    margin-right: -10px; 
    cursor: pointer; 
} 
</style> 

<div class="frame"> 
<div class="scrollbar"> 
    <div class="scroll-up">[^]</div> 
    <div class="scroller"> 
    <div class="scroller-draggable"></div> 
    </div> 
    <div class="scroll-down">[v]</div> 
</div> 
<div class="content"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim elit, tristique id tristique sed, vulputate eu libero. Nam nec lectus orci, at varius est. Aenean quis velit a lorem bibendum dignissim eu ac ipsum. Vestibulum convallis diam faucibus dolor placerat sed iaculis sapien mattis. Maecenas in velit nec mauris aliquam condimentum. Mauris porttitor magna id est ultrices dapibus. Fusce at urna felis. Quisque congue dignissim bibendum. Praesent egestas elementum ante, non condimentum libero tempor quis. Nullam fermentum tincidunt aliquam. Suspendisse nec mi velit. Nulla facilisi. Etiam vitae sem nec orci feugiat mattis a quis massa. Vivamus rutrum suscipit tempor. Proin varius interdum arcu eget auctor. Vivamus quis placerat nulla. Praesent imperdiet tempus dictum. Donec pharetra, orci ac gravida euismod, sapien tellus feugiat velit, eu egestas nunc nisi at enim. Phasellus blandit placerat neque, non rhoncus tellus commodo sit amet. Donec lectus erat, ornare sit amet venenatis id, viverra ac quam.</p> 
    <p>Sed aliquet metus vitae urna vulputate in mattis orci accumsan. Quisque dictum odio ac massa aliquet porttitor. Donec accumsan tortor sit amet ante vulputate at ullamcorper arcu auctor. Aenean gravida venenatis interdum. Aliquam erat volutpat. Integer eget dui vitae eros iaculis pharetra. In aliquam volutpat tincidunt. Sed vel imperdiet eros. Ut est nunc, venenatis sed varius et, scelerisque quis mi. Nullam aliquam pretium luctus. In hac habitasse platea dictumst. Etiam nec nibh libero. Nam pellentesque accumsan justo eget gravida. Ut egestas, mauris vitae egestas convallis, nibh turpis gravida justo, sit amet tincidunt libero orci eget metus.</p> 
    <p>Praesent convallis pellentesque tristique. Etiam vulputate, arcu sit amet dignissim feugiat, risus nulla adipiscing lectus, in dignissim metus mi iaculis sem. Duis pulvinar vehicula leo nec porta. Cras nisl felis, elementum sit amet commodo sit amet, gravida quis augue. Praesent pretium sapien ut orci rutrum auctor. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed porta mattis cursus. Duis facilisis enim quam, quis imperdiet nulla. Mauris dapibus tincidunt felis vel ultrices. Fusce ut diam lectus. In lacinia ultrices leo, ut fringilla tellus egestas eget. Ut in odio et est tristique tempor quis a orci. Integer sodales adipiscing condimentum. Ut lacinia vehicula tellus sed feugiat. Sed libero libero, vestibulum ut pharetra nec, vestibulum vel augue. Aliquam consequat nibh id nulla porta porta.</p> 
    <p>Nullam ligula tortor, sollicitudin et sollicitudin a, vestibulum vel dui. Ut at facilisis nisi. Duis id ante quis augue iaculis congue. Nulla facilisi. Phasellus tincidunt condimentum nisi, ac ultricies augue ultricies et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id mauris a sapien suscipit adipiscing. Pellentesque accumsan pulvinar tortor et elementum. Nulla facilisi. Nulla tempor lectus et purus luctus ultricies. Phasellus aliquam, libero non ullamcorper vulputate, est lectus ultricies massa, vel tempus magna elit ac lacus. Sed id dui purus. Quisque vel erat ipsum. In in lectus diam, a tempor velit.</p> 
    <p>Duis tincidunt neque quis ipsum feugiat malesuada. Sed et tortor vel nunc porta commodo. Mauris lacinia suscipit sagittis. Praesent non nibh ac elit congue sagittis vitae non dui. Nunc risus urna, sodales faucibus rhoncus at, interdum faucibus velit. Vivamus ultrices neque vehicula turpis luctus non fringilla orci aliquam. Maecenas commodo, est vitae consequat scelerisque, metus sem malesuada dolor, non tincidunt nunc turpis non arcu. Donec rutrum mi nec neque dignissim ac gravida neque dignissim. Quisque porttitor elit a ante ultrices interdum. In tempor neque vitae tellus laoreet tincidunt. Pellentesque bibendum accumsan sapien suscipit vestibulum. Nullam justo libero, consectetur id rhoncus at, vulputate eu tortor. Suspendisse mattis, erat sed viverra malesuada, sapien leo interdum leo, in adipiscing nibh purus quis diam. Sed vitae convallis purus. Maecenas leo mauris, egestas ut vehicula vel, sodales non justo. In consequat scelerisque velit, id pharetra arcu fringilla eget.</p> 
    <p>Phasellus convallis porta velit at tempor. Etiam non quam tortor. Vivamus eget nulla turpis. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras sollicitudin arcu quis libero tristique vel tempus turpis eleifend. Fusce sed justo sed sem tempor mattis vel eu nulla. Phasellus hendrerit tellus et dui luctus fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas ullamcorper, dolor eu egestas tincidunt, velit nulla sollicitudin metus, a ultrices nunc diam eu ante. Suspendisse sit amet hendrerit ante. Proin viverra posuere dolor. Nullam blandit lacus quis tortor dignissim non hendrerit risus pharetra.</p> 
</div> 
</div> 

<script type="text/javascript"> 
$(function() { 
    $(".frame .scrollbar").find(".scroll-up, .scroll-down").click(function() { 
    var $content = $(this).closest(".frame").children(".content"); 
    var dir = $(this).is(".scroll-up") ? -20 : 20; 
    $content.scrollTop($content.scrollTop() + dir); 
    }); 

    $(".frame .content") 
    .bind("mousewheel", function (e) { 
    $(this).scrollTop($(this).scrollTop() - e.wheelDelta); 
    }) 
    .scroll(function (e) { 
    var $scroller = $(this).closest(".frame").children(".scrollbar").children(".scroller"); 
    var $scrollerDraggable = $scroller.children(".scroller-draggable"); 

    if ($scrollerDraggable.data("isscrolling")) 
    return; 

    var pos = $(this).scrollTop()/($(this)[0].scrollHeight - $(this).height()); 
    console.log([pos]); 
    $scrollerDraggable.css("top", ($scroller.height() - $scrollerDraggable.height()) * pos); 
    }) 

    $(".frame .scroller-draggable").draggable({ 
    axis: 'y', 
    containment: $(".frame .scroller"), 
    start: function() { 
    $(this).data("isscrolling", true); 
    }, 
    drag: function (event, ui) { 
    var $scroller = $(this).closest(".scroller"); 
    var $content = $scroller.closest(".frame").children(".content"); 
    var pos = ui.position.top/($scroller.height() - $(this).height()); 

    $content.scrollTop(($content[0].scrollHeight - $content.height()) * pos); 
    }, 
    stop: function() { 
    $(this).data("isscrolling", false); 
    } 
    }); 
}); 
</script> 

它需要JQuery和JQuery UI，並且該示例仍然存在一些問題，但主要思想已經實現。僅在Chrome 7中測試的示例。 你可以從中製作一個jQuery插件。

Answer 3

雖然別人都表示這是如何完成（這是問題，因此它們是「正確」的答案）我想提出一個備選答案...

認真考慮你爲什麼會要做到這一點

滾動條是一樣容易通過設置2個CSS屬性添加（如無需代碼）

.container{ 
    height:200px;/*some fixed height*/ 
    overflow-y:auto;/*adds a native scrollbar, only when needed*/ 
} 

與自定義滾動條的問題是，它並沒有表現得很像本地人一樣。

• 你不能在軌道單擊滾動內容
• 無法使用鼠標上的滾輪滾動內容
• 您不能使用起來/下箭頭鍵，家，結束，向上翻頁，頁DN滾動康特NT
• 的旋螺釘的尺寸不會改變，以反映可以滾動

的內容量，這些似乎並不像一個大問題，但改變/刪除UI控件的「行爲」通常不建議用戶習慣。

從雅各布尼爾森的可用性網站報價 「Alertbox」 的文章： 「Scrolling and Scrollbars」 - 7月11日，2005年（重點煤礦）

滾動條很容易得到的權利。事實上，你做的工作越少，滾動條越好。 當您使用內置滾動條而非設計自己的時，可用性幾乎始終得到增強。