jquery.scrollbar 简单的滚动条插件

Question

功能

具有高级功能的跨浏览器 CSS 可自定义滚动条：

• 易于实现
• 不需要固定的高度或宽度
• 支持响应性设计
• 可自定义 CSS
• 标准浏览器滚动行为
• 支持垂直和水平滚动条或两者都支持
• 自动重新初始化滚动条
• 支持外部滚动条
• 提供AngularJS指令。
• 支持使用文本区域滚动条。
• 浏览器支持：IE7+，Edge，Firefox，Opera，Chrome，Safari

特点

易于实现

转到演示页面，找到一个适合您需要的滚动条，复制HTML/CSS/JavaScript并将其粘贴到页面上。修改CSS样式以更改滚动条颜色/大小。如果您找不到适合您需要的滚动条，请与作者联系，您的滚动条将被添加到演示页面中。

不需要固定的高度或宽度

大多数滚动条插件都需要设置容器的高度或宽度，以便计算滚动条大小。jQuery 滚动条不需要高度，也不需要宽度。可以使用最大高度/最大宽度来限制容器大小，也可以在父容器中使用以像素/百分比为单位的标准高度/宽度。

支持响应性设计

jQuery滚动条可以用于响应性设计，因为不需要为容器设置固定的高度/宽度。当内容或容器大小更改时，滚动条将自动更新/隐藏/显示。

可自定义CSS

使用CSS自定义滚动条颜色、大小或位置。使用简单或高级的HTML结构来自定义滚动条的外观。如果简单或高级的HTML结构不是您想要的，您可以使用您自己的HTML结构和自定义元素。

标准浏览器滚动行为

如果浏览器可以滚动内容，jQuery滚动条也会滚动它！为什么？因为它不像许多插件那样模拟浏览器滚动行为，而是隐藏标准滚动条并显示自定义滚动条。你想用鼠标中间的按钮滚动吗？-就用它吧！你想用触觉滚动吗？-来吧！您的浏览器支持自定义滚动行为？-也使用它！使用标准或jQuery滚动顶/滚动左函数来获取当前滚动偏移量或滚动到任何位置。使用标准的“滚动”事件来处理内容滚动。您不需要知道自定义函数/事件-一切都是根据标准滚动行为完成的。

支持垂直和水平滚动条或两者都支持

大多数滚动条插件允许使用垂直或水平滚动条。只有少数人可以同时使用垂直滚动条和水平滚动条，而且它们使用的是滚动仿真，这有其局限性。jQuery滚动条不模拟滚动行为。同时，它可以同时使用垂直滚动条和水平滚动条。

自动重新初始化滚动条

通常在初始化插件时计算滚动条大小和位置。如果使用javascript/Ajax更改了内容或容器大小，怎么办？-您必须更新插件以重新计算滚动条大小。这是可以的，因为你知道什么时候内容被改变了。但是如果你不知道什么时候改变了怎么办呢？例如，如果内容包含没有高度/宽度的图像。这些图像在加载后更改内容大小。有三种明显的方法：始终设置图像的高度/宽度(并强制用户设置与WYSIWYG编辑器添加的内容的图像大小)，等待整个页面加载，然后初始化滚动条或处理内容图像加载，然后重新初始化滚动条插件。很烦人，不是吗？

jQuery滚动条处理内容/容器大小的更改，并自动重新计算滚动条大小。只需初始化一次，然后忘记它。

支持外部滚动条

jQuery滚动条支持3种类型的滚动条：inner-滚动条显示在内容上(AppleMacOS)；outer-滚动条将内容移动到显示自身(MicrosoftWindows滚动条)；external-滚动条位于页面的任何位置。因此，您可以在Apple Mac和Windows样式的滚动条之间进行选择，甚至可以将其放置在容器之外，并按您的意愿对其进行样式设置。很酷，不是吗？

提供AngularJS指令。

现在，您可以轻松地使用带有AngularJS指令的jQuery滚动条。只包括模块jQueryScrollbar作为模块中的依赖项，可以在容器上使用带有属性的jQuery滚动条。数据-jQuery-滚动条. jQuery滚动条作为AngularJS指令.

TextArea滚动条

将jQuery滚动条应用到文本区域，并享受CSS样式的滚动条。支持IE8+。需要固定的高度/宽度。

浏览器支持：IE7+，Edge，Firefox，Opera，Chrome，Safari

当然，所有现代浏览器都支持从IE7开始。最有问题的浏览器是IE，正如您已经怀疑的那样。但不是IE7，是IE8！惊讶吗？我曾经是!与IE8相比，IE7的高度/宽度计算效果更好。IE8渲染器在使用最大高度带着溢出：自动。它被正式记录为 bug 在IE8的最终版本中没有修复。还有其他缺陷，最大高度/最大宽度和定位。因此，如果要支持IE8，请小心。

标准滚动所具有的高级特性，但是滚动仿真插件必须要模仿或者根本没有。

• 鼠标中间按钮/触摸/箭头按钮滚动
• 选择文本时自动滚动内容
• 自动滚动到聚焦元素

jQuery滚动条选项

• autoScrollSize [true\false](默认值：true)
  根据容器/内容大小自动计算滚动条大小
• autoUpdate [true\false](默认值：true)
  如果更改容器/内容大小，则自动更新滚动条
• disableBodyScroll [true\false](缺省值：false)
  如果启用了此选项，并且鼠标位于可滚动容器上，则不会滚动主页面。
• duration [ms](失责：200)
  当鼠标超过滚动条时滚动速度持续时间(滚动仿真模式)
• ignoreMobile [true\false](缺省值：false)
  不要初始化移动设备上的自定义滚动条。
• ignoreOverlay [true\false](缺省值：false)
  当本地滚动条覆盖内容(MacOS、移动设备等)时，不要初始化浏览器中的自定义滚动条。
• scrollStep [px](失责：30)
  当鼠标在滚动条上时滚动步骤(滚动仿真模式)
• showArrows [true\false](缺省值：false)
  添加类以在高级滚动条中显示滚动条箭头
• stepScrolling [true\false](默认值：true)
  模拟滚动条上的滑鼠滚动
• scrollx [String=元素](默认值：Simple)
  简约, 先进，用于水平滚动条的HTML或jQuery元素。
• scrolly [String=元素](默认值：Simple)
  简约, 先进、用于垂直滚动条的HTML或jQuery元素
• onDestroy [function](默认值：NULL)
  当滚动条被破坏时，回调函数
• onInit [function](默认值：NULL)
  第一次初始化滚动条时的回调函数
• onScroll [function](默认值：NULL)
  当容器被滚动时回调函数
• onUpdate [function](默认值：NULL)
  计算滚动条大小之前的回调函数。

局限性

• 可滚动元素不应该有填充、边距、左/顶值。
• 不要在IE8中使用最大高度-它会使浏览器呈现器崩溃。
• 由于隐藏本机覆盖滚动条时出现了错误，因此在Firefox中没有初始化自定义卷轴。
• 如果容器的子高度以父级的百分比设置，则自定义卷轴工作不正确(问题)#57)

常见问题

1. 问题：我需要在边框/滚动条和文本之间填充，但是滚动条不允许这样做。我该怎么办？

   答：用填充包装div中的内部内容。

2. 问题：我需要在滚动条内容和页面其余部分之间的空间。我该怎么办？

   答：使用填充将可滚动的内容包装到容器中。

3. 问题：如果内容包含图像，则可以在加载图像后更改内容大小。我应该重新初始化滚动条吗？

   答：不是，滚动条会自动检测内容/容器大小的变化，并重新计算其大小或隐藏/显示滚动条。

4. 问题：如何将内容滚动到自定义位置？

   答：在容器上使用标准的jQuery SCROLLTOP/SCROLLeft函数。例如，如果有一个容器具有类“滚动条-MacOSX”，请使用以下代码从顶部滚动50 px：

   1. jQuery('.scrollbar-macosx').scrollTop(50);
5. 问题：我想知道内容何时滚动。有回音吗？

   答：是的，您可以使用“onScroll”回调(查看AngularJS示例)，也可以在容器上使用标准的“滚动”事件。例如，您有一个具有类“scrolbar-MacOSX”的容器，然后使用以下代码来处理滚动事件：

   1. jQuery('.scrollbar-macosx').not('.scroll-wrapper').on("scroll", function(){
   2. console.log('content is scrolling');
   3. });
6. 问题：滚动条不替换标准滚动条。我该怎么办？

   答：替换整个页面的标准滚动条不是个好主意。但是如果您真的需要它，请将所有页面包装到高度/宽度为100%的容器中，溢出：AUTO并将滚动条应用于此容器。

7. 问题：我不想看到水平滚动条。我该怎么办？

   答：用这样的CSS隐藏它：

   1. .scroll-element.scroll-x {
   2. display: none !important;
   3. }

   但是不要忘记，即使滚动条是隐藏的，内容仍然可以水平滚动。

8. 问题：在容器上使用jQuery的.Width()或.High()将返回不正确的值。怎么一回事？

   答：内部可滚动内容使用额外的高度/宽度&滚动条的偏移量来隐藏它。要获得正确的高度/宽度值，请使用可见容器：

   1. jQuery('.scrollbar-macosx').not('.scroll-content').height();
   2. jQuery('.scrollbar-macosx').not('.scroll-content').width();
9. 问题：如何检测DIV何时滚动到底部边缘？

   答：您可以使用jQuery的“滚动”事件进行计算，也可以使用“onScroll”回调函数提供有关容器大小和偏移量的信息：

   1. jQuery('.scrollbar-dynamic').scrollbar({
   2. "onScroll": function(y, x){
   3. if(y.scroll == y.maxScroll){
   4. console.log('Scrolled to bottom');
   5. }
   6. }
   7. });
10. 问题：我可以使用jQuery滚动条自定义TextArea滚动条吗？

    答：可以，停那儿吧。现在支持TextArea滚动条。看 基本滚动条演示 一页。

11. 问题：是否可以设置滚动条的最大/分钟大小？

    答：使用CSSmax-高度/最小高度(最大宽度/最小宽度)设置滚动条大小限制。

12. 问题：我有一个问题/想报告一个问题。我如何联系作者？

    答：请发电子邮件到 13real008@gmail.com

相关链接

• 官网：http://gromo.github.io/jquery.scrollbar/
• github 地址：https://github.com/gromo/jquery.scrollbar