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

Question

我正在创建一个高度专业化的应用程序，我想在其中试验自定义滚动条。

理想情况下，我会禁用内置滚动条并自己绘制。该页面的外观和感觉与任何其他页面一样，只是滚动条不可见。箭头键、滚轮和任何其他滚动页面的方式都应该在我的 webapp 运行的平台上正常工作。

一种方法是将内容放在绝对定位的包装 div 中，top: 0; bottom: 0; width: 100%; overflow: hidden; 使用这种方法，我将不得不通过监听键盘和滚轮事件来重新实现自己的滚动。这并不理想，尤其是翻页和翻页行为很难复制。我应该在页面上向下滚动多少像素？数量因平台而异。我相信魔术鼠标“加速”滚动也很难复制。

在实现这个自定义滚动条可视化方面我有哪些选择？

注意：我知道有关自定义滚动条和可用性的研究。你不需要指出这一点，我很痛苦地意识到这一点 :) 我不是在谈论只是重新着色滚动条。更多地从电影编辑器或音乐音序器的角度来考虑它。这是非常定制和专业的东西。

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

Answer 1

这是一个使用 javascript 和 css 的潜在解决方案。这个想法不是删除滚动条，而是简单地隐藏它并让它继续工作。

概念：

这里实际内容的滚动条被推到了包装器之外。这可以防止它被看到（包装器有overflow:hidden;），但不会阻止它工作。

|---------包装器------------| ||--------内容-----------|---| || |[^]| || |[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（虽然我没有自定义滚动条显示）。

Answer 2

我想因为这是高度专业化的东西，所以没有必要谈论可用性:-)

我唯一知道的是实现您自己的事件捕获 - 基于按键、鼠标按下等 - 应该很容易获得页面的当前位置（一种虚拟的 - 因为您将加载所有内容并且只需更改自定义“视口”）。

我强烈建议您查看出色的 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