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

Answer 1

I guess since this is highly specialized thing, there is no need to talk about usability :-)

The only thing I am aware of is to implement your own event capture - based on keypress, mousedown etc. - it should be easy to get the current position of page (kind of virtual - because you will have everything loaded and just change the custom "viewport").

I highly recommend checking great QuirksMode tutorials and docs:

• Keypress events: http://www.quirksmode.org/js/keys.html

• Mouse events: http://www.quirksmode.org/js/events_mouse.html

I am not sure about scrolling wheel, though - I haven't heard about technique to emulate that, but surely you would be able to find or code something.

EDIT: I have found some low-level JS implementation of scroll wheel (click wheel): http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel

Answer 2

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