结合航点和水平滚动答案

【问题标题】：Combining Waypoints and Horizontal Scroll结合航点和水平滚动
【发布时间】：2014-11-17 19:24:50
【问题描述】：

我已经成功地让航点 (http://imakewebthings.com/jquery-waypoints/) 和水平滚动 (http://www.htmldrive.net/items/show/966/jQuery-Horizontal-automatic-Scrollbars-with-mouse) 在单独的页面上工作，但无法将它们组合起来。我认为这与航点选项参数有关。

航点功能是：

$(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>

我整理了一个快速的 JS 小提琴，但由于某种原因，该示例中的水平滑块无法正常工作。如果有帮助：http://jsfiddle.net/bretwhiteley/w2p84Lmp/

【问题讨论】：

我确实注意到我需要将水平滚动设置为 true: "horizontal:true," - 这没什么区别

标签： javascript jquery scroll jquery-waypoints

【解决方案1】：

除了horizontal 选项之外，您还需要设置context 选项，因为您使用的可滚动元素不是窗口。来自文档：

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

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

【讨论】：