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

问题描述

我创建了一个高度专业化的应用程序，我想要实验一个自定义滚动条。

理想情况下，我会禁用内置的滚动条和画我自己。页面将看起来像任何其他页面，只是滚动条将不可见。箭头键，滚轮和任何其他滚动页面的手段应该在我的webapp运行的平台上运行。

一种方法是将在绝对定位的包装器div中的内容， top：0; bottom：0; width：100％; overflow：hidden; 使用这种方法，我将不得不重新实现滚动自己，通过听键盘和滚轮事件。这是不太理想，特别是向上翻页和向下翻页行为将很难复制。我应该在一个页面上滚动多少像素？数量因平台而异。

在实现自定义滚动条可视化时，我的选择是什么？

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

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

解决方案

这里是使用javascript和css的潜在解决方案。

概念：

这是一个简单的方法，

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

 
 | --------- WRAPPER ----------- | 
 || -------- CONTENT ----------- | --- | 
 || | [^] | 
 || | [0] | 
 || | [0] | 
 || | [] | 
 || | [] | 
 || | [v] | 
 || -------------------------- | --- | 
 | --------------------------- | 
 
 
 
 
 实施： 
 
 
 
 / p> 
 
 
 < div class =wrapper> 
< div class =content> 
< p> 1Hello世界< / p> 
< p> 2Hello世界< / p> 
 ... 
< / div> 
< / div> 
  
脚本（我使用jquery，但它可以很容易地用纯javascript重写）。 ：
  $（function（）{
 // initialize：两者需要具有相同的高度和宽度默认值：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更新自定义滚动条显示.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屋！