jquery - 向 1 方向滚动时的回调函数

Question

当我向右滚动 300 像素时如何获得回调？

<div id="container">

    <div class="scrollable">
        this will be 6000px wide
    </div>

</div>

css

#container {width: 900px; overflow: hidden;}
.scrollable {width: 6000px; overflow-x: scroll;}

js（随意重写，我只是尝试这个作为例子）

$('#container').scroll(function (evt) {
    var target = $(evt.currentTarget);
    horizontal_scroll = target.scrollLeft();
    if (previous_scroll < horizontal_scroll && horizontal_scroll % 100 == 0) {
        previous_scroll = horizontal_scroll;
        alert("You've scrolled 300px to the right");
    }

});

Answer 1

您可以使用 jQuery 的$.offset()方法来确定内部移动了多远，div并在它超过 -300px（负）时触发警报，如下所示：

var alerted = false; // prevents unlimited alerts
$('#container').on('scroll', function(e){
    var el = $(this),
        os = $('.scrollable',this).offset();

    if (os.left <= -300 && alerted !== true){
        alert('Scrolled 300px');
        alerted = true; // prevent unlimited alerts
    }
});

在这里更新小提琴：http: //jsfiddle.net/4upYj/

我希望这有帮助！