【发布时间】：2011-08-15 23:22:44
【问题描述】：
您可以在此处轻松查看第一页上的问题：http://m.vancouverislandlife.com/
向下滚动（向上滑动）并允许内容离开页面，它不会反弹并永远丢失。但是，在其内容确实溢出页面并因此应该是可滚动的页面上，滚动工作正常（参见Accomodations > b&b's and scroll down以获取此示例）。
我注意到在我的电脑上，第一页的滚动总是停留在-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;
【问题讨论】：
-
如果你设置
bounce:true会发生什么？你可能知道，但position:fixed在移动 safari 中不起作用（直到 ios5）。但是在 ios5 中，您将不需要任何插件，因为它支持动态滚动natively。如果更改插件是一种选择，您是否看过touchScroll 和scrollability？ -
@Mrchief:
bounce: true没有区别，我不希望用户无论如何都能够滚动到边缘。我知道position: fixed在移动 Safari 中不起作用（但它并没有那么不受支持，因为它是无效的，因为移动 Safari 使用移动视口而不是固定视口），我不是针对 iOS5 的，是的，更改插件是一个选项，所以我会看看这些，谢谢。 -
我尝试在本地设置，但没有成功（可能是由于我没有 php 的 ajax 调用，或者可能是深夜）。您是否可以转储我可以玩的静态 html（jsfiddle 会搞砸）？令人惊讶的是，去年我使用其他东西进行动态滚动效果很好，我现在找不到相同的插件（我也从那个客户端继续前进）。无论如何，我会再试一次。
-
@Mrchief：这是一个 jsFiddle：jsfiddle.net/minitech/QDuwk/1 链接当然不起作用，但滚动是存在的。您可以将其从页面上弹起，但无法取回。
-
@minitech 这个问题解决了吗？滚动到内容边界之外很烦人。
标签： javascript xhtml mobile-website iscroll4