Question

我成功地获得了Waypoints（http://imakewebthings.com/jquery-waypoints/）和水平滚动（http://www.htmldrive.net/items/show/966/jQuery-Horizontal-automatic-Scrollbars-with-mouse）在不同的页面上工作，但无法将它们组合在一起。我认为它与waypoints选项参数有关。

航点的功能是：

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

Answer 1

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

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

更新：3.0版本带来了context option的新文档页面，并根据您正在使用的版本略微更改了规则。

结合航点和水平滚动

1 个答案: