【问题标题】：how to get event scroll to bottom using iscroll library?如何使用 iscroll 库将事件滚动到底部？
【发布时间】：2014-03-20 11:19:11
【问题描述】：

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

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

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

这是我的代码：

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

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

});

【问题讨论】：

标签： javascript jquery iscroll

【解决方案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

【讨论】：

我需要 iScroll5 的确切功能！请问我怎样才能用它编写检测（底部和顶部）功能？ ;O
不，您的演示适用于 iScroll4。
@Strobel：而且你不能自己修改？
我很接近了，问题是当我使用苹果魔术鼠标或触控板的鼠标滚轮到达顶部或底部时，函数会触发多次。
非常感谢您的尝试。我在这里挖掘得更深，我发现这不是我想象的简单问题。我会继续努力，如果我想出解决方案，我会告诉你。

【解决方案2】：

你可以在不使用任何第三方库的情况下做到这一点，如下：

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

您可以通过修改我指定为默认的数字“550”来更改位置

【讨论】：

您需要使用像 iScroll 这样的库来制作页面的一部分，即 div 容器在 iPad 和其他平板电脑上滚动。 iScroll 使用硬件加速转换 (CSS3) 来移动 div 层，因此像 scrollTop 这样的正常滚动属性不可用。

【解决方案3】：

你为什么使用这个库？

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

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

如果您可以使用本页末尾的版本 5 https://github.com/cubiq/iscroll，您可以查看如何配置事件。例如：

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

【讨论】：

我如何使用这个库？
我刚刚用正确的脚本创建了你的 fiddler 的新版本，但是这个 iScroll 不是一个好的库，它充满了 bug。这里是网址jsfiddle.net/cQ75J/16