我正在创建一个高度专业化的应用程序,我想尝试自定义滚动条.
理想情况下,我会禁用内置滚动条并绘制自己的滚动条.该页面看起来和任何其他页面一样,只是滚动条不可见.箭头键,滚轮和任何其他滚动页面的方法应该在我的webapp运行的平台上作为例外工作.
一种方法是将内容放在一个绝对定位的包装器div中,顶部为：0;底部：0;宽度：100％;溢出：隐藏;通过这种方法,我将不得不通过监听键盘和滚轮事件来重新实现自己的滚动.这并不理想,特别是页面向上和向下翻页行为很难复制.我应该在页面上滚动多少像素？数量因平台而异.我相信魔术鼠标“加速”卷轴也难以复制.
有哪些实现此自定义滚动条可视化的选项？
注意：我知道有关自定义滚动条和可用性的研究.你不需要指出这一点,我痛苦地意识到这一点:)我不是在谈论只是重新着色滚动条.从电影编辑器或音序器的角度来考虑更多.这是非常定制和专业的东西.
更新：http://augustl.com/blog/2010/custom_scroll_bar_native_behaviour
解决方法
这是一个使用javascript和css的潜在解决方案.我的想法不是删除滚动条,而是简单地隐藏它,让它继续做它的工作.
概念：
这里实际内容的滚动条被推到包装器外面.这可以防止它被看到(包装器有溢出：隐藏;)但不会阻止它工作.
|---------WRAPPER-----------| ||--------CONTENT-----------|---| || |[^]| || |[0]| || |[0]| || |[ ]| || |[ ]| || |[v]| ||--------------------------|---| |---------------------------|
执行：
标记：
<div class="wrapper">
<div class="content">
<p>1Hello World</p>
<p>2Hello World</p>
...
</div>
</div>
和脚本(我使用了jquery,但它可以很容易地用纯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(虽然我没有自定义滚动条显示).
