如何使用iscroll库将事件滚动到底部？

Question

当用户使用iscroll库滚动到底部时需要获取事件吗？

当用户滚动到顶部和底部时，我需要提醒。我怎么能这样做？

这是我的小提琴 http://jsfiddle.net/cQ75J/13/

这是我的代码：

var myScroll;
function loaded() {
    myScroll = new iScroll('wrapper');
}

$(document).ready(function(){
    loaded();
  //  alert("--")

});

Answer 1

只需向iScroll选项添加其他选项，如下所示：

var myScroll = new iScroll('wrapper', {
    bounce: true,
    onScrollEnd: function(e) {
        if (this.y == this.minScrollY)
            alert('This is the beginning');
        if (this.y == this.maxScrollY)
            alert('This is the end');
    } 
});

我在这里使用了onScrollEnd事件，但你可以选择多个像 these 。

你可以找到工作的jsFiddle HERE 。

更新

的 DEMO

为了向您展示可能的确切内容，您可以执行以下操作：

<强> HTML

<div id="begin"><b>The START</b></div>
<div id="end"><b>The END</b></div>

<强> CSS

#begin {     
    height:80px;
    padding: 3px;
    position:absolute;
    top:150px;
}

#end {     
    height:80px;
    padding: 3px;
    position:absolute;
    top:150px;
    display:none; 
}

<强>的JavaScript

function loaded() {  
    var myScroll = new iScroll('wrapper', {
        bounce: true,
        onScrollEnd: function(e) {
            if (this.y == this.minScrollY)
                $("#begin").show();
            if (this.y < this.minScrollY)
                $("#begin").hide();
            if (this.y == this.maxScrollY)
                $("#end").show();
            if (this.y > this.maxScrollY)
                $("#end").hide();
        } 
    });
}

$(document).ready(function(){
    loaded();    
});

在开头和结尾出现div的地方。

您可以找到此实施的演示 HERE

更新：iScroll5

对于iScroll 5，您可以执行以下操作：

var myScroll;

function loaded () {
    myScroll = new IScroll('#wrapper', { 
        scrollbars: true, 
        interactiveScrollbars: true,
        mouseWheel: true,
        fadeScrollbars: false 
    });
    myScroll.on('scrollEnd', function() {
            if (this.y == 0)
                $("#begin").show();
            if (this.y < 0)
                $("#begin").hide();
            if (this.y == this.maxScrollY)
                $("#end").show();
            if (this.y > this.maxScrollY)
                $("#end").hide();
        });
}

loaded();

您还要确保遵守新的语法和CSS规范。

您可以找到其中一些HERE。

DEMO

或者你可以定义一个边距（也许这适用于魔术鼠标）

DEMO 2

Answer 2

为什么要使用这个库？

我更喜欢这个：http://manos.malihu.gr/jquery-custom-content-scroller/

但如果是必需的，则必须使用版本5。 因为版本4没有事件。

如果您可以使用本页末尾的版本5 https://github.com/cubiq/iscroll，您可以了解如何配置活动。 例如：

myScroll = new IScroll('#wrapper');
myScroll.on('scrollEnd', doSomething);

Answer 3

您可以在不使用任何第三方库的情况下执行此操作，如下所示：

var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height()-550);
    if (closeToBottom) {
              //Do your stuff here
    }

您可以通过修改数字来改变位置＆＃34; 550＆＃34;我指定为默认