使用 HTML/CSS/JavaScript 自定义滚动条可视化 [英] Custom scroll bar visualization with HTML/CSS/JavaScript

问题描述

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

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

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

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

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

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

解决方案

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

概念:

此处实际内容的滚动条被推到包装器之外.这可以防止它被看到(包装器具有 overflow:hidden;)，但不会阻止它工作.

<前>|---------包装纸-----------|||--------内容-----------|---||||[^]||||[0]||||[0]||||[ ]||||[ ]||||[v]|||--------------------------|---||---------------------------|

实施:

标记:

<div class="内容"><p>1Hello World</p><p>2Hello World</p>...

和脚本(我使用过 jquery，但它可以很容易地用纯 javascript 重写.):

$(function() {//初始化:两者都需要具有相同的高度和宽度(宽度默认值:100%)//这些当然可以放在你的样式表上.$("div.wrapper").css({ height: "200px", overflow: "hidden" });$("div.content").css({ height: "200px", overflow: "auto" });//现在将内容宽度扩展到包装器之外$("div.content").width($("div.content").width() + 22);//22px是IE滚动条的宽度//防止高亮拖动滚动包装器 div(从而显示条)$("div.wrapper").scroll(function() {this.scrollLeft = 0;this.scrollTop = 0;});$("div.content").scroll(function() {//使用 this.scrollTop 作为 this.clientHeight 的百分比更新自定义滚动条显示//alert("Place slider at " + ((100 * this.scrollTop)/this.clientHeight) + "%!");});});

这里工作正常(虽然我没有自定义滚动条显示).

I am creating a highly specialized application where I want to experiment with a custom scroll bar.

Ideally, I'd disable the built-in scroll-bar and draw my own. The page would look and feel like any other page, just that the scroll bar wouldn't be visible. The arrow keys, the scroll wheel, and any other mean of scrolling the page, should work as excepted on the platform my webapp runs on.

One way would be to put the content in a wrapper div that is absolutely positioned, with top: 0; bottom: 0; width: 100%; overflow: hidden; With this approach, I would have to re-implement scrolling myself, by listening to keyboard and scroll wheel events. This is hardly ideal, especially page up and page down behavior would be hard to replicate. How many pixels should I scroll on a page down? The number varies from platform to platform. I believe magic mouse "accelerating" scrolls would be hard to replicate as well.

What are my options in implementing this custom scroll bar visualization?

Note: I am aware of the research that has been done regarding custom scroll bars and usability. You need not point this out, I am painfully aware of this :) I'm not talking about just re-coloring the scroll bar. Think of it more in terms of a movie editor or a music sequencer. It's very custom and specialized stuff.

Update: http://augustl.com/blog/2010/custom_scroll_bar_native_behaviour

解决方案

Here is a potential solution using javascript and css. The idea is not to remove the scrollbar but to simply hide it instead and let it keep doing it's work.

Concept:

Here the scrollbar of the actual content is shoved outside the wrapper. This prevents it from being seen (wrapper has overflow:hidden;) but does not prevent it from working.

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

Implementation:

The markup:

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

And the script (I've used jquery, but it could easily be rewritten in pure 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 (though I don't have a custom scrollbar display).

这篇关于使用 HTML/CSS/JavaScript 自定义滚动条可视化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！