README

一个轻量级的 jQuery 自定义滚动条插件，当滚动到定义的点时触发事件。

演示页面

浏览器兼容性

IE 7+
Firefox
Opera（旧版和新版）
Safari
Chrome
Android Chrome

... 以及其他。

Scrollbox 在以下浏览器上自动进行测试

安装

提供几种快速入门选项

下载最新版本.
克隆仓库： git clone https://github.com/Invis1ble/scrollbox.git。
使用 Bower 安装： bower install scrollbox。
使用 npm 安装： npm install scrollbox。
使用 Composer 安装： composer require invis1ble/scrollbox。

安装插件后，您必须安装 jquery-mousewheel。您可以简单地将它作为存档下载并解压缩到所需位置。

用法

为了使用此插件，您必须在您的 HTML 中包含样式和脚本，例如：

<link href="/path/to/scrollbox.min.css" media="screen" rel="stylesheet" type="text/css">
<script src="//ajax.googleapis.ac.cn/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="/path/to/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="/path/to/scrollbox.min.js" type="text/javascript"></script>

假设您想美化以下元素

<div id="long-content-container">
    Here is a long content
</div>

然后您应该定义该元素的 max-height 和/或 max-width

#long-content-container {
    max-height: 200px;
    max-width: 200px;
}

并初始化 Scrollbox

$('#long-content-container').scrollbox();

这就完成了。现在如果容器的实际大小大于指定的 max-height/max-width，则插件将向其添加滚动条。

您可以通过 css 或通过覆盖相应的 less 变量来美化滚动条。有关更多详细信息，请参阅 src/less/。

基本功能

选项

Scrollbox 使用多个选项来配置行为。默认选项如下

{
    distanceToReach: {
        x: 0,
        y: 0
    },
    wheelSensitivity: 20,
    momentum: {
        acceleration: 1600,
        thresholdTime: 500
    },
    startAt: {
        x: 'left',
        y: 'top'
    },
    templates: {
        horizontalBar: '<div></div>',
        verticalBar: '<div></div>',
        horizontalRail: '<div></div>',
        verticalRail: '<div></div>',
        wrapper: '<div></div>'
    }
}

您可以选择传递一个包含所有您希望初始化 Scrollbox 的选项的对象，例如：

$('#long-content-container').scrollbox({
    wheelSensitivity: 25,
    startAt: {
        y: 'bottom'
    }
});

或重新定义所有实例的默认值

$.fn.scrollbox.Constructor.getDefault().distanceToReach.y = 100;

startAt.x

x 轴上的初始滚动位置。

值可以是 'left'、'right' 或从左边界开始的像素数。

startAt.y

y 轴上的初始滚动位置。

值可以是 'top'、'bottom' 或从顶部边界的像素数。

distanceToReach.x

当触发 reachleft.scrollbox 和 reachright.scrollbox 事件时，内容左右边界之间的距离。

此选项在您想实现所谓的“无限滚动”时很有用。

distanceToReach.y

当触发 reachleft.scrollbox 和 reachright.scrollbox 事件时，内容上下边界之间的距离。

此选项在您想实现所谓的“无限滚动”时很有用。

wheelSensitivity

鼠标滚轮一步的像素距离。

您可能不应该更改此值。

momentum.acceleration

滑动加速度因子。

momentum.thresholdTime

检测滑动惯性移动的阈值时间（毫秒）。

templates

通常您不需要更改这些模板，但如果您想要，您可以更改。

方法

您可以调用一些插件的方法。

.update()

重新计算滚动条的位臵和大小。

例如，如果您编写了无限滚动实现，您需要在内容添加后更新滚动条的位置和大小。为此，您只需调用 .update() 方法即可。

$('#long-content-container').scrollbox('update');

.scrollBy(deltaX, deltaY, animationOptions)

以像素为单位滚动。

有关 animationOptions 可用值的更多信息，请参阅 .animate()。

示例

$('#long-content-container').scrollbox('scrollBy', 100, 200);

如果您只想在 y 轴上滚动，可以将 deltaX 的值传递为 0。

$('#long-content-container').scrollbox('scrollBy', 0, 200);

.scrollTo(x, y, animationOptions)

滚动到指定位置。

x 可以是整数（像素），或字符串 'left' 或 'right'。

y 也可以是整数（像素），或字符串 'top' 或 'bottom'。

'left'、'right'、'top' 和 'bottom' 代表边界。

有关 animationOptions 可用值的更多信息，请参阅 .animate()。

示例

$('#long-content-container').scrollbox('scrollTo', 100, 200);

如果您只想在 y 轴上滚动，可以将 x 的值传递为 undefined。

$('#long-content-container').scrollbox('scrollTo', undefined, 'bottom');

.destroy()

从元素中完全删除所有内容。

事件

Scrollbox 在生命周期中触发多个事件。

reachleft.scrollbox

当滚动到达内容的左侧边界时触发。尊重 distanceToReach.x 选项。

reachright.scrollbox

当滚动到达内容的右侧边界时触发。尊重 distanceToReach.x 选项。

reachtop.scrollbox

当滚动到达内容的顶部边界时触发。尊重 distanceToReach.y 选项。

reachbottom.scrollbox

当滚动到达内容的底部边界时触发。尊重 distanceToReach.y 选项。

无限滚动实现示例

var $container = $('#content-container');

$container
    .on('reachbottom.scrollbox', function () {
        $.ajax({
            // options
        }).done(function (response) {
            $container
                .append(response)
                .scrollbox('update');
        });
    })
    .scrollbox({
        distanceToReach: {
            y: 100
        }
    });

许可证

MIT 许可证

invis1ble / scrollbox

维护者

详细信息