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

Question

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

javascripthtmlbrowserlayoutcross-browser

10

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

理想情况下，我想要禁用内置的滚动条并绘制自己的滚动条。页面看起来和感觉像任何其他页面一样，只是滚动条不会可见。箭头键、滚轮和任何其他滚动页面的方式应该在我的 Web 应用程序运行的平台上按预期工作。

一种方法是将内容放在一个包装器 div 中，该 div 具有绝对定位，具有 top: 0; bottom: 0; width: 100%; overflow: hidden; 这种方法需要我重新实现滚动，监听键盘和滚轮事件。这很难实现，特别是页上和页下的行为会很难复制。我应该在一页下滚动多少像素？数字因平台而异。我认为使用魔术鼠标“加速”滚动也很难复制。

我实现此自定义滚动条可视化的选项是什么？

注意： 我知道已经进行了关于自定义滚动条和可用性的研究。你不需要指出这一点，我非常清楚：）我不是说只是重新着色滚动条。将其视为电影编辑器或音乐序列软件等非常定制化和专业化的东西。

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

- August Lilleaas

当你设置好并使其正常工作后，能否请您发布实验的URL - 我很乐意看到它的运行情况。如果您开源事件处理库和环境，那将是很好的。 - dusoft

我可能会将其提取到一个单独的库中，所以会这样做 :) - August Lilleaas

博客文章做得很好，看到它完全实现了真是太棒了。 - Joel

2个回答

2

我认为由于这是高度专业化的事情，所以没有必要谈论可用性:-)

我知道的唯一一件事是实现自己的事件捕获-基于按键、鼠标按下等-很容易获取页面的当前位置(有点虚拟-因为你将加载所有内容并只改变定制的"视口")。

我强烈推荐查看QuirksMode的优秀教程和文档:

Keypress事件: http://www.quirksmode.org/js/keys.html
Mouse事件: http://www.quirksmode.org/js/events_mouse.html

不过关于滚轮，我不确定——我没有听说过模拟它的技术，但肯定你能找到或编写一些东西。

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

- dusoft

有关滚轮使用的事件。更大的问题是复制向上翻页和向下翻页，并使它们滚动与默认向上翻页和向下翻页相同的量。 - August Lilleaas

实际上，他可以通过在检查按键的函数中执行“return false”来禁用PageUp/PageDown事件。此外，我认为像素移动对他来说不是问题——因为他基本上只需要捕获事件，而不需要模拟实际的PageUp/PageDown移动。 - dusoft

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Joel · Accepted Answer

以下是使用 JavaScript 和 CSS 可能的解决方案。该想法不是要删除滚动条，而是将其隐藏起来，并让它继续发挥作用。

概念：

这里的实际内容滚动条被推到了包装器外部。这可以防止它被看到（包装器具有 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) + "%!");
  });
});

这里可以看到它在运行（虽然我没有自定义滚动条显示）。