代码之家 › 专栏 › 技术社区 › August Lilleaas

使用HTML/CSS/JavaScript自定义滚动条可视化

cross-browser layout browser html javascript

9

August Lilleaas · 技术社区 · 16 年前

我正在创建一个高度专业化的应用程序,在这里我想用自定义滚动条进行实验。

一种方法是将内容放在一个包装器div中,这个包装器div是绝对定位的,带有 top: 0; bottom: 0; width: 100%; overflow: hidden; 使用这种方法,我必须通过监听键盘和滚轮事件来重新实现滚动。这很难达到理想的效果,尤其是向上翻页和向下翻页的行为很难复制。我应该在一页上向下滚动多少像素?人数因平台而异。我相信神奇的鼠标“加速”卷轴也很难复制。

在实现这个自定义滚动条可视化时,我有什么选择?

注: 我知道已经做了关于自定义滚动条和可用性的研究。你不必指出这一点,我痛苦地意识到:)我不是说只是重新着色滚动条。更多地从电影编辑或音乐测序器的角度来考虑。这是非常定制和专业的东西。

更新: http://augustl.com/blog/2010/custom_scroll_bar_native_behaviour

2 回复 | 直到 15 年前

1

16

Joel 16 年前

在这里,实际内容的滚动条被推到包装器之外。这样可以防止它被看到(包装器有 overflow:hidden; )但这并不妨碍它发挥作用。

|---------WRAPPER-----------|
||--------CONTENT-----------|---|
||                          |[^]|
||                          |[0]|
||                          |[0]|
||                          |[ ]|
||                          |[ ]|
||                          |[v]|
||--------------------------|---|
|---------------------------|

标记:

<div class="wrapper">
  <div class="content">
    <p>1Hello World</p>
    <p>2Hello World</p>
    ...
  </div>
</div>

以及脚本(我使用了jquery,但是可以很容易地用纯javascript重写):

$(function() {
  // initialize: both need to have the same height and width (width default: 100%)
  // these could go on your stylesheet of course.
  $("div.wrapper").css({ height: "200px", overflow: "hidden" });
  $("div.content").css({ height: "200px", overflow: "auto" }); 

  // now extend the content width beyond the wrapper
  $("div.content").width($("div.content").width() + 22); // 22px is the width of IE scrollbars

  // prevent highlight dragging from scrolling the wrapper div (thereby displaying the bars)
  $("div.wrapper").scroll(function() {
    this.scrollLeft = 0;
    this.scrollTop = 0;
  });

  $("div.content").scroll(function() {
    // update custom scrollbar display using this.scrollTop as a percentage of this.clientHeight
    // alert("Place slider at " + ((100 * this.scrollTop) / this.clientHeight) + "%!");
  });
});

And here it is working (尽管我没有自定义的滚动条显示)。

2

dusoft 16 年前

我想既然这是高度专业化的东西,就没有必要谈论可用性:-)

我强烈建议您查看QuirksMode教程和文档:

按键事件: http://www.quirksmode.org/js/keys.html
鼠标事件: http://www.quirksmode.org/js/events_mouse.html

我不确定滚动轮,虽然-我还没有听说过技术来模仿,但肯定你能找到或代码的东西。

编辑:我发现了一些低层次的JS实现的滚轮(点击滚轮): http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel