Javascript 结合航路点和水平滚动

我已经成功地在不同的页面上获得了航路点（）和水平卷轴（），但无法将它们组合起来。我认为这与航路点选项参数有关

航路点功能是：

$(function () {
            $('#waypoint').waypoint(function () {
                alert('You have scrolled to an entry.');
            }, {
                offset: '100px'
            });
        });

将其添加到页面时，会显示：

<div id="horiz_container_outer">
<div id="horiz_container_inner">
    <div id="horiz_container">
        <div class="horiz_box1">Stuff</div>
        <div class="horiz_box2">Stuff</div>
        <div class="horiz_box1">Stuff2</div>
        <div class="horiz_box2">Stuff2</div>
        <div class="horiz_box1">Stuff3</div>
        <div class="horiz_box2">Stuff3</div>
        <div id="waypoint">Waypoint</div>
    </div>
</div>

东西
东西
材料2
材料2
物品3
物品3
航路点

---

我制作了一个快速JS提琴，但由于某种原因，在该示例中水平滑块不起作用。如果有帮助：

除了

水平

选项外，还需要设置

上下文

选项，因为您使用的可滚动元素不在窗口中。从文档中：

上下文定义了航路点所属的可滚动元素及其作用。默认窗口表示航路点偏移是相对于整个视口计算的。您可以将其设置为另一个元素，以使用该元素内的航路点。它接受选择器字符串、原始HTML元素或jQuery对象

---

更新：3.0版本为提供了一个新的文档页面，并根据您使用的构建稍微更改了关于允许的内容的规则。

我注意到我需要将水平滚动设置为true：“水平：true”-这没有什么区别