iScroll 滚动到底部吗？

Question

您可以在此处轻松查看第一页上的问题：http://m.vancouverislandlife.com/

向下滚动（向上滑动）并允许内容离开页面，并且不会反弹并永远丢失。但是，在内容确实溢出页面并因此应该可滚动的页面上，滚动可以正常工作（请参阅住宿> b&b's 并向下滚动以获取相关示例）。

我注意到在我的计算机上，第一页上的滚动始终停留在 -899px 处。我找不到其他经历过此问题的人，无论我尝试什么，我都无法解决它！帮助！

（不过，这并不紧急，因为 iPhone 和 iPod Touch 的目标受众不会受到此影响，因为它们的屏幕空间很小。）

好吧，新问题。为了解决 iScroll 问题，我刚刚创建了一个自定义脚本。但是，它在实际设备上无法正常工作。在桌面浏览器上，它运行得很好。在移动设备上，它偶尔会跳回顶部并且无法识别某些触摸。这可能是因为我取消了默认事件并且不得不采取一些黑客措施。我该如何解决这个问题？ （是的 - +500 赏金的简单问题。不错吧？）

这是脚本，网站位于通常的位置：

function Scroller(content) {
    function range(variable, min, max) {
        if(variable < min) return min > max ? max : min;
        if(variable > max) return max;
        return variable;
    }

    function getFirstElementChild(element) {
        element = element.firstChild;

        while(element && element.nodeType !== 1) {
            element = element.nextSibling;
        }

        return element;
    }

    var isScrolling = false;
    var mouseY = 0;
    var cScroll = 0;
    var momentum = 0;
    if("createTouch" in document) {
        content.addEventListener('touchstart', function(evt) {
            isScrolling = true;
            mouseY = evt.pageY;
            evt.preventDefault();
        }, false);
        content.addEventListener('touchmove', function(evt) {
            if(isScrolling) {
                evt = evt.touches[0];

                var dY = evt.pageY - mouseY;
                mouseY = evt.pageY;
                cScroll += dY;
                momentum = range(momentum + dY * Scroller.ACCELERATION, -Scroller.MAX_MOMENTUM, Scroller.MAX_MOMENTUM);

                var firstElementChild = getFirstElementChild(content);

                content.style.WebkitTransform = 'translateY(' + range(cScroll, -(firstElementChild.scrollHeight - content.offsetHeight), 0).toString() + 'px)';
            }
        }, false);
        window.addEventListener('touchend', function(evt) {
            isScrolling = false;
        }, false);
    } else {
        content.addEventListener('mousedown', function(evt) {
            isScrolling = true;
            mouseY = evt.pageY;
        }, false);
        content.addEventListener('mousemove', function(evt) {
            if(isScrolling) {
                var dY = evt.pageY - mouseY;
                mouseY = evt.pageY;
                cScroll += dY;
                momentum = range(momentum + dY * Scroller.ACCELERATION, -Scroller.MAX_MOMENTUM, Scroller.MAX_MOMENTUM);

                var firstElementChild = getFirstElementChild(content);

                content.style.WebkitTransform = 'translateY(' + range(cScroll, -(firstElementChild.scrollHeight - content.offsetHeight), 0).toString() + 'px)';
            }
        }, false);
        window.addEventListener('mouseup', function(evt) {
            isScrolling = false;
        }, false);
    }

    function scrollToTop() {
        cScroll = 0;
        content.style.WebkitTransform = '';
    }

    function performAnimations() {
        if(!isScrolling) {
            var firstElementChild = getFirstElementChild(content);
            cScroll = range(cScroll + momentum, -(firstElementChild.scrollHeight - content.offsetHeight), 0);
            content.style.WebkitTransform = 'translateY(' + range(cScroll, -(firstElementChild.scrollHeight - content.offsetHeight), 0).toString() + 'px)';
            momentum *= Scroller.FRICTION;
        }
    }

    return {
        scrollToTop: scrollToTop,
        animationId: setInterval(performAnimations, 33)
    }
}

Scroller.MAX_MOMENTUM = 100;
Scroller.ACCELERATION = 1;
Scroller.FRICTION = 0.8;

Answer 1

我认为 Andrew 在设置 #wrapper div 的高度方面是正确的。正如他指出的那样，

that.maxScrollY = that.wrapperH - that.scrollerH;

通常情况下，这是可行的。但现在您已将 #content 更改为 position:fixed，包装器元素不再“包装”您的内容，因此 that.wrapperH 的值为 0，事情就会中断。

免责声明：我没有浏览整个脚本，因此这里可能是错误的

当手动设置 #wrapper 的高度时，请说 500px，就变成了，

that.maxScrollY = 500 - that.scrollerH;

这里的愚蠢之处在于，当内容很多且窗口很小时，that.scrollerH 的值相对接近 500，比如 700px< /代码>。两者的差异为 200px，因此您只能滚动 200 像素，从而使其看起来像是冻结的。这归结为您如何设置 maxScrollY 值。

解决方案（至少对于 Chrome 浏览器）：

由于 #wrapper 实际上不包含任何内容，因此我们无法在计算中使用它。现在我们只剩下唯一可以可靠地从中获取这些维度的东西了，#content。在这种特殊情况下，使用内容元素的 scrollHeight 似乎可以产生我们想要的效果。这很可能具有预期的行为，

that.maxScrollY = that.scrollerH - that.scroller.scrollHeight;

scrollerH 是 offsetHeight，它大致是您在窗口中看到的高度。 scroller.scrollHeight 是被认为可滚动的高度。当内容不超过页面长度时，它们大致相当。这意味着没有滚动。当内容很多时，这两个值的差就是你需要的滚动量。

还有一个小错误，看起来它已经存在了。当您有很多内容时，滚动到底部时最后几个元素会被栏覆盖。要解决此问题，您可以设置一个偏移量，例如

that.maxScrollY = that.scrollerH - that.scroller.scrollHeight - 75;

任意数字 75。如果它是条本身的高度，并带有 2 或 3 个像素作为一点填充，那可能是最好的。祝你好运！

编辑：

我昨晚忘了提及，但这是我在尝试调试此问题时使用的两个示例页面。

长页面
短页

Answer 2

这可能是 CSS 问题。在样式表（mobile.css 第 22 行）中，尝试从 #content 中删除 position:fixed。

这应该允许文档正常滚动（计算机上的垂直滚动条，移动浏览器上的“可滑动”）。

position:fixed 的元素退出文档的正常流程，它们的定位是相对于浏览器窗口的。这可能就是您遇到滚动问题的原因。固定定位通常适用于即使页面滚动也应始终保持在同一位置的元素（即“固定”在页面顶部的通知栏）。

Answer 3

没有明确的解决方案，但更多的是我想要的方向：
#wrapper 和#content 的overflow:hidden 与#content 的postion:fixed 配对，似乎是问题的原因。

如果从 #content 中删除了position:fixed，则可以进行滚动，但“空白”div 的分层错误（在 Firefox 5 中测试）。

Answer 4

您的包装器 div 的高度似乎为 0。因此所有计算都是负数，将其高度设置为窗口高度将纠正滚动问题。当我通过 firebug 和 chromes 调试栏手动设置包装器高度时，滚动功能按其应有的方式运行。

#content div 的大小似乎在调整大小时发生了变化，可能更好的主意是让 #wrapper div 的大小发生变化，然后让 #content 继承该大小。

[编辑]
你不相信我，所以 codez，来自 iscroll-lite.js

refresh: function () {
  var that = this,
      offset;
  that.wrapperW = that.wrapper.clientWidth;
  that.wrapperH = that.wrapper.clientHeight;
  that.scrollerW = that.scroller.offsetWidth;
  that.scrollerH = that.scroller.offsetHeight;
  that.maxScrollX = that.wrapperW - that.scrollerW;
  that.maxScrollY = that.wrapperH - that.scrollerH; 

在你的页面中翻译为，

that.wrapperH = 0;
that.maxScrollY = -that.scrollerH

当滚动完成时，此代码被调用。

var that = this,

resetX = that.x >= 0 ? 0 : that.x < that.maxScrollX ? that.maxScrollX : that.x,
resetY = that.y >= 0 || that.maxScrollY > 0 ? 0 : that.y < that.maxScrollY ? that.maxScrollY : that.y;
...
that.scrollTo(resetX, resetY, time || 0);

看到 that.maxScrollY > 0？？如果 maxScrollY 为负数，则向上滚动将永远反弹。

Answer 5

我最终只是制作了自己的小脚本来处理滚动：

// A custom scroller
function range(variable, min, max) {
    if(variable < min) return min > max ? max : min;
    if(variable > max) return max;
    return variable;
}

var isScrolling = false;
var mouseY = 0;
var cScroll = 0;
if("createTouch" in document) {
    // TODO: Add for mobile browsers
} else {
    content.addEventListener('mousedown', function(evt) {
        isScrolling = true;
        mouseY = evt.pageY;
    }, false);
    content.addEventListener('mousemove', function(evt) {
        if(isScrolling) {
            var dY = evt.pageY - mouseY;
            mouseY = evt.pageY;
            cScroll += dY;

            var firstElementChild = content.getElementsByTagName("*")[0];

            content.style.WebkitTransform = 'translateY(' + range(cScroll, -(firstElementChild.scrollHeight - content.offsetHeight), 0).toString() + 'px)';
        }
    }, false);
    window.addEventListener('mouseup', function(evt) {
        isScrolling = false;
    }, false);
}

并修改了其他一些部分。我想，它确实也节省了大量的下载时间。

不过，我仍然会接受答案并在 5 天内授予赏金。

Answer 6

改变的问题需要新的答案。我查看了代码，发现您计算了“移动”函数每一步的动量。这是没有意义的，因为动量是在移动结束后使用的。这意味着在开始时捕获鼠标位置，然后在结束时计算差异。所以我添加了两个新变量，

var startTime;
var startY;

在开始事件（mousedown/touchstart）内，我添加了，

startY = evt.pageY;
startTime = evt.timeStamp || Date.now();

然后我的结束处理程序有以下内容，

var duration = (evt.timeStamp || Date.now()) - startTime;
if (duration < 300) {
    var dY = evt.pageY - startY;
    momentum = range(momentum + dY * Scroller.ACCELERATION, -Scroller.MAX_MOMENTUM, Scroller.MAX_MOMENTUM);
} else {
    momentum = 0;
}

我还从 mousemove/touchmove 内部删除了动量计算。这样做消除了我在 iPhone 上看到的跳跃行为。我还看到其他不需要的行为（整个窗口“滚动”），但我猜您一直在努力消除这些行为，所以我没有尝试。

祝你好运。这是我为测试而复制的编码页面。我还冒昧地重构了本节的代码，删除了一些重复的代码。如果你想查看的话，它位于 mobile3.js 下。