javascript - 非本机滚动

Question

是否有可以帮助制作滚动条的库，该滚动条在 HTML 中为 div 滚动？假设有一个 200 X 200 的 div，但这个 div 内的所有内容实际上都是 200 * 1000，所以您必须向下滚动才能看到所有内容。

Answer 1

您可以使用基于 JQuery 的Tiny Scrollbar 。

Answer 2

你应该使用

overflow: auto;

用于自动滚动条插入，以及

overflow: scroll;

让它出现。

^{*你标记了 CSS。}

添加

您可以使用 CSS3 来设置滚动条的样式：（即使 Google 也在使用它们，只需在控制台中查看即可。）

• http://css-tricks.com/custom-scrollbars-in-webkit/
• http://www.webkit.org/blog/363/styling-scrollbars/

注意：IE 不支持 CSS3（一如既往），因此您必须使用旧的 IE 特定方式来设置样式。

目前 Webkit 浏览器将支持它：（如 Chrome 和 Safari）

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: gray;
}

在这里测试一下。

但是，这在 Firefox 中不起作用，因为他们认为用户讨厌那些花哨的滚动条。所以如果你真的想改变它，你可以试试jScrollPane，它是一个 jQuery 插件并且易于使用。IMO，CSS 比插件好得多，因为它包含的要下载的字符更少。

Answer 3

假设您想将滚动条放在以下 div 上：
<div class="myscrolling" >blah blah...</div>

CSS：

div.myscrolling{
height:200px;
width:200px;
overflow:auto;
}