Google 是如何制作滚动条的？

Question

我刚刚访问 http://www.google.com/finance 并注意到页面中间有一个看起来很棒的滚动条。

Google 如何创建这种滚动条的外观/感觉？

注意：此滚动条与 Google 在其 Wave 产品中使用的滚动条不同。

屏幕截图

更新：

滚动条不会立即出现。不要刷新页面。让页面保持理想状态一段时间，直到世界上出现新的新闻报道。一旦出现新的新闻报道，新文章就会导致滚动条出现。

Answer 1

非常有趣的问题。我只是有空闲时间，花了它来实现这个简单的例子（花了大约 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 2

并不是说我可以看到它，但我想象一个由各种图像制成的自定义控件。

您制作一个轨道图像，平铺以构成背景，顶盖和底盖图像充当前进/后退按钮（具有悬停和按下状态），可移动控件通常由三部分组成，两侧有两个端盖一个可平铺的中心区域，可以调整大小以适应。然后，您监视控制区域上的拖动并将其保持在轨道内，然后单击（或更好的鼠标按下）前进/后退按钮。

如果您不想，有像 jQuery UI Slider 这样的库可以为您处理这个问题自己编码。

Answer 3

尽管其他人已经指出了这是如何完成的（这就是问题，因此它们是“正确”的答案），但我想建议一个替代答案......

认真考虑为什么你想这样做

通过设置 2 个 css 属性（例如不需要任何代码）即可轻松添加滚动条。

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

定义滚动条的问题在于它的行为与本机滚动条的行为不太一样。

• 您无法点击轨道滚动内容
• 您无法使用鼠标滚轮滚动内容
• 您无法使用向上/ 向下方向键，home、end、向上翻页、page dn滚动内容
• 指旋螺钉不会改变大小以反映可以滚动的内容量

这些可能看起来不是一个主要问题，但更改/删除用户所操作的 UI 控件的“行为”通常不建议使用。

引用 Jakob Neilsen 可用性网站“Alertbox”文章：“滚动和滚动条< /a>" - 2005 年 7 月 11 日。（强调我的）

滚动条很容易正确。事实上，您所做的工作越少，滚动条就越好。 当您使用内置滚动条而不是设计自己的滚动条时，可用性几乎总是会得到增强。