Html 在移动网络浏览器上下拉刷新
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7306328/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pull down to refresh on mobile web browser
提问by Chandra Kiran
I am giving mobile support for a web application. I have a requirement in my application that pull down screen to refresh the page to get the latest updates. I have seen this feature in iPhone native applications and it was also implemented in twitter and foursquare mobile sites.
我正在为 Web 应用程序提供移动支持。我的应用程序要求下拉屏幕以刷新页面以获取最新更新。我在 iPhone 本机应用程序中看到过这个功能，它也在 twitter 和foursquare 移动站点中实现。
I have seen some posts here but i unable to understand what exactly they are saying.. I am very new to this environment. please guide me in doing this feature.
我在这里看到了一些帖子，但我无法理解他们到底在说什么。我对这种环境很陌生。请指导我做这个功能。
Is there any javascript libraries or jqueries are there for this feature?
此功能是否有任何 javascript 库或 jquery？
回答by Alex Grande
Essentially, pull to refresh has only been implemented publicly using a hiHymaned javascript scrolling mechanisms, like iScroll. This is how Twitter is doing it - with some sort of js webkit css3 scrolling library. But, you'll notice even on an iPhone 4, twitter's scrolling in mobile web is janky and not 100% natural.
从本质上讲，拉动刷新仅使用被劫持的 javascript 滚动机制公开实现，例如iScroll。Twitter 就是这样做的 - 使用某种 js webkit css3 滚动库。但是，即使在 iPhone 4 上，您也会注意到，twitter 在移动网络中的滚动很卡顿，而且不是 100% 自然。
Yesterday, I wrote a scroll to refresh handler for overflow: scrollcomponents. Now that iPhone is supporting overflow: scroll, we don't have to hiHyman the scrolling any longer. This will be especially true when Apple fixes the current iOS -webkit-overflow-scrolling: touch bugs.
昨天，我写了一个滚动来刷新overflow: scroll组件的处理程序。现在 iPhone 支持overflow: scroll，我们不必再劫持滚动了。当 Apple 修复当前的 iOS -webkit-overflow-scrolling: touch 错误时尤其如此。
I can't yet provide my code open source, but here's the interface to do it, with some comments.
我还不能提供我的代码开源，但这里是做它的界面，有一些评论。
(function(window, $, undefined) {
var hasTouch = 'ontouchstart' in window,
startEvent = hasTouch ? 'touchstart' : 'mousedown',
endEvent = hasTouch ? 'touchend' : 'mouseup';
var STATES = {
...
};
var CLASS_NAMES = {
...
};
var PullToReload = function(callback, wrapper, instructionsContent) {
// create all the dom elements and append the right before a content wrapper, but after a primary main wrapper.
// <div class="mainWrapper" style="overflow: scroll; height: 600px;"><div class="pullToReloadWrapper"></div><div class="contentWrapper"></div></div> is the markup.
// Check if the main wrapper's height is bigger than the content wrapper's height. If so, then change the main wrapper height to be the height of the content wrapper.
// scroll main wrapper by the reload wrapper's height.
// set state to pull
// invoke initEvents()
};
PullToReload.prototype.setState = function(state) {
// set the state of either pull, update, or release. Change CSS classes and content.
}
// boiler plate event handling switch
PullToReload.prototype.handleEvent = function(e) {
switch (e.type) {
case startEvent:
this.start(e);
break;
case "scroll":
this.scroll(e);
break;
case endEvent:
this.end(e);
break;
}
};
PullToReload.prototype.initEvents = function() {
// add event listeners for startEvent and endEvent with method "this"
// calling this in an event listener automatically calls handleEvent()
};
PullToReload.prototype.start = function() {
// start listening to on scroll for the wrapper
};
PullToReload.prototype.end = function(e) {
// remove scroll event listener
// if the current state is in release, then set state to update and invoke the callback,
// else the state is in pull, then invoke reset()
};
PullToReload.prototype.scroll = function(e) {
// if current scroll position is almost to the top, change state to release.
// else put it back to pull state.
};
PullToReload.prototype.reset = function() {
// animate scroll to height of reload component.
// put css classes back to the beginning
};
})(window, jQuery, I);
This solution works on iOS5, Safari, Chrome, and probably others. I had to use jQuery in a couple places, mainly animating the scroll.
此解决方案适用于 iOS5、Safari、Chrome 以及其他可能的解决方案。我不得不在几个地方使用 jQuery，主要是动画滚动。
This solution doesn't require a css3 scroll handler, but just overflow: scroll;
此解决方案不需要 css3 滚动处理程序，但只需要 overflow: scroll;
回答by RaphaelDDL
Start by learning JavaScript, XHttpRequests and then touch events.
首先学习 JavaScript、XHttpRequests，然后是触摸事件。
The pull to refresh is nothing more than a trigger to XHR (AJAX) call that appends new data on the selected element you want.
拉动刷新只不过是触发 XHR (AJAX) 调用，将新数据附加到您想要的选定元素上。
But if you want a short answer, check Cubiq's iScroll 4 at http://cubiq.org/iscroll-4
但是如果你想要一个简短的答案，请在http://cubiq.org/iscroll-4 上查看 Cubiq 的 iScroll 4
Best scrolling JS ever.
有史以来最好的滚动 JS。
Here is the example: http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/
这是示例：http: //cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/
