iOS div动画滚动没有固定高度（内容通过ajax加载）？ [英] iOS div momentum scrolling without fixed height (content loaded via ajax)?

问题描述

我创建了一个iOS网络应用程序，它有一个固定的div（例如 200px height）和该卷轴内的内容。我不喜欢默认的iOS滚动，因为它不像你通过向下滑动通过网页找到的本机滚动（本机滚动在iOS有势头，而默认的溢出没有动量）。

I am creating an iOS web app that has a fixed div (say 200px height) and the content inside of that scrolls. I don't like the default iOS scrolling, as it's not like the native scrolling you find by just swiping down through a webpage (the native scrolling in iOS has momentum, while the default one for overflow is without momentum).

div 我想滚动具有以下特质：

The div I am trying to scroll in has the following qualities:

1. 设置宽度


2. 动态高度（通过AJAX提供的内容）

使用jQuery AJAX将内容从外部网站加载到 div 中，并且有一个选项AJAX请求。这意味着，根据加载页面中内容的数量， div 的高度将改变。

The content is loaded from an external website into a div using jQuery AJAX, and there is an option to reload the AJAX request. This means that, depending on the amount of content in the loaded page, the height of the div will change.

我似乎没有找到任何解决方案允许动态滚动在iOS中 div 没有一个集合，我尝试以下： p>

I can't seem to find any solutions that allow momentum scrolling in iOS where the div doesn't have a set with, and I've tried the following:

1. - webkit-overflow-scrolling：touch


2. iScroll

1. - webkit-overflow-scrolling: touch
2. iScroll

这些问题：

1. 这是我的第一选择，因为它只是一个 css 标签，通常工作正常。它是新的，但有很多错误，包括一个为我的网络应用程序的交易破碎机。如果在输入元素上焦点，页面将放大（即使使用 / code>标签设置为 user-scalable：no ）并且不缩小，直到在文本框中键入文本，然后所有内容关闭 3px 。


2. 此解决方案是滞后的，高度需要固定。使用它的刷新功能太麻烦了，因为当AJAX请求重新加载时，页面重新加载时，如果元素被隐藏等需要调用。

1. This was my first choice, as it's just a css tag and usually works fine. It's new though and has a lot of bugs, including a deal breaker one for my web app. If you focus on an input element, the page zooms in (even with the meta tag set to user-scalable:no) and doesn't zoom out until you type text in the text box, and then everything is off by 3px.
2. This solution is laggy and the height needs to be fixed. Using it's refresh function is too cumbersome as it needs to be called when the AJAX request is reloaded, when the page is reloaded, if elements are hidden, etc.

TL; DR：除了 -webkit-overflow-scrolling 和 iScroll ，这样我就可以在iOS中使用动态高度（通过AJAX加载内容）的动画滚动。

TL;DR: Are there any solutions other than -webkit-overflow-scrolling and iScroll that will allow me to use momentum scrolling on a div with a dynamic height (content loaded in via AJAX) in iOS?

推荐答案

我目前为克服动态高度问题所做的是在DOM更新后设置高度。我使用以下代码：

What I currently do to overcome the dynamic height issue is setting the height after the DOM is updated. I do this by using the following code:

document.getElementById('content').style.height = window.innerHeight - getPosition('loading')[1] + "px";

在这个例子中，主DIV是'content'，我有一个跨度在DIV上面称为loading它使用它作为参考点，因为标头的大小根据你所处的webapp的什么部分而改变。下面是getPosition函数：

In this example the main DIV is 'content' and I have a span right above that DIV called loading which it uses as a reference point since the header changes in size depending on what part of the webapp you are on. Below is the getPosition function:

function getPosition(who){
var e = document.getElementById(who);
var position = {x:0,y:0};
while (e) {
    position.x += e.offsetLeft;
    position.y += e.offsetTop;
    e = e.offsetParent;
}
return [position.x , position.y];};

此外，我相信iOS 5.0.1之后的缩放已经修复。

Additionally, I believe the zoom has been fixed since iOS 5.0.1.

这篇关于iOS div动画滚动没有固定高度（内容通过ajax加载）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！