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

问题描述

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

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

在理想情况下，我会禁用内置的滚动条，并绘制我自己。该页面看起来和感觉像任何其他网页，只滚动条将不可见的。方向键，滚轮和滚动页面的任何其他意思，应该工作在平台上的除外我的webapp运行在

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.

一种方法是把在绝对定位，以包装DIV内容顶部：0;底部：0;宽度：100％;溢出：隐藏; 通过这种方法，我将不得不重新实现滚动我自己，通过听取键盘和滚轮事件。这绝不是理想的，尤其是页面Up和Page Down行为将很难复制。我多少像素应该在页面上向下滚动？数量从平台而异。我相信魔术鼠标加快卷轴将很难复制为好。

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.

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

推荐答案

下面是一个使用JavaScript和CSS一个潜在的解决方案。我们的想法是不去除滚动条，但简单地隐藏它，而不是让它继续做下去的工作。

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.

理念：

下面的实际内容的滚动条被包装物外推。从被人看见这prevents它（包装有溢出：隐藏; ），但不会从工作prevent它

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]|
||--------------------------|---|
|---------------------------|

实施

的标记：

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

和脚本（我使用jQuery的，但它可以很容易地在纯JavaScript被改写。）

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屋！