Custom scroll bar visualization with HTML/CSS/JavaScript

Question

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

Answer 1

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).