禁用android的chrome下拉刷新function

我为我的公司创build了一个小型的HTML5 Web应用程序。

此应用程序显示项目的列表，一切工作正常。

该应用程序主要用于Android手机和Chrome浏览器。 此外，该网站保存在主屏幕上，所以Androidpipe理整个事情作为一个应用程序（ 使用WebView我猜 ）。

Chrome Beta（我认为Android系统WebView）也引入了“下拉刷新”function（ 请参阅此链接 ）。

这是一个方便的function，但我想知道是否可以禁用一些元标记（或JavaScript的东西），因为刷新可以很容易地触发用户在浏览列表和整个应用程序重新加载时触发。

这也是应用程序不需要的function。

我知道这个function只能在Chrome beta版本中使用，但是我也有这种感觉，就是在稳定的应用程序上登陆。

谢谢！

编辑：我已经卸载了Chrome浏览器testing版，并且固定到主屏幕的链接现在以稳定的Chrome打开。 所以固定链接从Chrome开始，而不是一个Web视图。

编辑：今天（2015-03-19）下拉刷新已经到了稳定的铬。

编辑：从@Evyn答案我按照这个链接，并得到这个JavaScript / jQuery的代码工作。

var lastTouchY = 0; var preventPullToRefresh = false; $('body').on('touchstart', function (e) { if (e.originalEvent.touches.length != 1) { return; } lastTouchY = e.originalEvent.touches[0].clientY; preventPullToRefresh = window.pageYOffset == 0; }); $('body').on('touchmove', function (e) { var touchY = e.originalEvent.touches[0].clientY; var touchYDelta = touchY - lastTouchY; lastTouchY = touchY; if (preventPullToRefresh) { // To suppress pull-to-refresh it is sufficient to preventDefault the first overscrolling touchmove. preventPullToRefresh = false; if (touchYDelta > 0) { e.preventDefault(); return; } } }); 

正如@bcintegrity所指出的那样，我希望将来能够提供一个站点清单解决scheme（和/或元标签）。

此外，对上述代码的build议是受欢迎的。

Answer 1

通过执行以下任一操作，可以有效防止拉到刷新效果的默认操作：

1. 防止默认触摸顺序的某些部分，包括以下任何一项（按照破坏性最小至破坏性最小的顺序）：
   • 一个。 整个触摸stream（不理想）。
   • 湾 所有顶级overscrolling touchmoves。
   • C。 第一个顶级overscrolling touchmove。
   • d。 仅当1）当页面y滚动偏移量为零时发生初始触摸启动，以及2）触摸移动会引起顶部过滚动时，第一个顶部过滚动触摸移动。
2. 在适当的情况下，将“touch-action：none”应用于触摸目标元素，禁用触摸序列的默认操作（包括拉到刷新）。
3. 对body元素应用“overflow-y：hidden”，如果需要的话，使用div来滚动内容。
4. 通过chrome：// flags（disable-pull-to-refresh-effect）在本地禁用效果。

查看更多

Answer 2

目前，您只能通过chrome禁用此function：// flags /＃disable-pull-to-refresh-effect – 直接从您的设备打开。

你可以试着去touchmove事件，但是达到可以接受的结果的机会是非常渺茫的。

Answer 3

我使用MooTools，我创build了一个类来禁用目标元素的刷新，但关键是（原生JS）：

 var target = window; // this can be any scrollable element var last_y = 0; target.addEventListener('touchmove', function(e){ var scrolly = target.pageYOffset || target.scrollTop || 0; var direction = e.changedTouches[0].pageY > last_y ? 1 : -1; if(direction>0 && scrolly===0){ e.preventDefault(); } last_y = e.changedTouches[0].pageY; }); 

我们在这里所做的是findtouchmove的y方向，如果我们正在向下移动屏幕，目标滚动是0，我们停止事件。 因此，不刷新。

这意味着我们正在开展每一个“举措”，这可能是昂贵的，但是迄今为止我find的最好的解决scheme…

Answer 4

AngularJS

我用这个AngularJS指令成功地禁用了它：

 //Prevents "pull to reload" behaviour in Chrome. Assign to child scrollable elements. angular.module('hereApp.directive').directive('noPullToReload', function() { 'use strict'; return { link: function(scope, element) { var initialY = null, previousY = null, bindScrollEvent = function(e){ previousY = initialY = e.touches[0].clientY; // Pull to reload won't be activated if the element is not initially at scrollTop === 0 if(element[0].scrollTop <= 0){ element.on("touchmove", blockScroll); } }, blockScroll = function(e){ if(previousY && previousY < e.touches[0].clientY){ //Scrolling up e.preventDefault(); } else if(initialY >= e.touches[0].clientY){ //Scrolling down //As soon as you scroll down, there is no risk of pulling to reload element.off("touchmove", blockScroll); } previousY = e.touches[0].clientY; }, unbindScrollEvent = function(e){ element.off("touchmove", blockScroll); }; element.on("touchstart", bindScrollEvent); element.on("touchend", unbindScrollEvent); } }; }); 

一旦用户向下滚动，立即停止观看是安全的，因为拉动刷新没有被触发的机会。

同样，如果scrolltop > 0 ，事件将不会被触发。 在我的实现中，只有在scrollTop <= 0情况下，我才会在touchstart上绑定touchmove事件。 一旦用户向下滚动，就解除绑定（ initialY >= e.touches[0].clientY ）。 如果用户向上滚动（ previousY < e.touches[0].clientY ），那么我调用preventDefault() 。

这节省了我们不必要的看滚动事件，但阻止了过度滚动。

jQuery的

如果你使用jQuery，这是未经testing的等价物。 element是一个jQuery元素：

 var initialY = null, previousY = null, bindScrollEvent = function(e){ previousY = initialY = e.touches[0].clientY; // Pull to reload won't be activated if the element is not initially at scrollTop === 0 if(element[0].scrollTop <= 0){ element.on("touchmove", blockScroll); } }, blockScroll = function(e){ if(previousY && previousY < e.touches[0].clientY){ //Scrolling up e.preventDefault(); } else if(initialY >= e.touches[0].clientY){ //Scrolling down //As soon as you scroll down, there is no risk of pulling to reload element.off("touchmove"); } previousY = e.touches[0].clientY; }, unbindScrollEvent = function(e){ element.off("touchmove"); }; element.on("touchstart", bindScrollEvent); element.on("touchend", unbindScrollEvent); 

当然，纯JS也可以达到同样的效果。

Answer 5

简单的Javascript

我使用标准的JavaScript实现。 简单易用。 只要粘贴，它工作正常。

 <script type="text/javascript"> //<![CDATA[ window.addEventListener('load', function() { var maybePreventPullToRefresh = false; var lastTouchY = 0; var touchstartHandler = function(e) { if (e.touches.length != 1) return; lastTouchY = e.touches[0].clientY; // Pull-to-refresh will only trigger if the scroll begins when the // document's Y offset is zero. maybePreventPullToRefresh = window.pageYOffset == 0; } var touchmoveHandler = function(e) { var touchY = e.touches[0].clientY; var touchYDelta = touchY - lastTouchY; lastTouchY = touchY; if (maybePreventPullToRefresh) { // To suppress pull-to-refresh it is sufficient to preventDefault the // first overscrolling touchmove. maybePreventPullToRefresh = false; if (touchYDelta > 0) { e.preventDefault(); return; } } } document.addEventListener('touchstart', touchstartHandler, false); document.addEventListener('touchmove', touchmoveHandler, false); }); //]]> </script> 

Answer 6

纯CSS的最佳解决scheme：

 body { width: 100%; height: 100%; display: block; position: absolute; top: -1px; z-index: 1; margin: 0; padding: 0; overflow-y: hidden; } #pseudobody { width:100%; height: 100%; position: absolute; top:0; z-index: 2; margin: 0; padding:0; overflow-y: auto; } 

看到这个演示： https ： //jsbin.com/pokusideha/quiet

Answer 7

由于几个星期，我发现，我用来禁用Chrome刷新行动的JavaScriptfunction将不再工作。 我已经解决了这个问题：

 $(window).scroll(function() { if ($(document).scrollTop() >= 1) { $("html").css({ "touch-action": "auto"} ); } else { $("html").css({ "touch-action": "pan-down" }); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

Answer 8

经过几个小时的尝试，这个解决scheme适用于我

 $("html").css({ "touch-action": "pan-down" }); 

Answer 9

我发现设置你的身体 CSS 溢出 – Y：隐藏是最简单的方法。 如果你想要一个滚动的应用程序页面，你可以使用滚动function的div容器。

Answer 10

请注意，overflow-y不是inheritance的，因此您需要将其设置在所有块元素上。

你可以简单的通过jQuery来做到这一点：

  $(document.body).css('overflow-y', 'hidden'); $('*').filter(function(index) { return $(this).css('display') == 'block'; }).css('overflow-y', 'hidden'); 

Answer 11

我所做的是在touchstart和touchend / touchcancel事件中添加以下内容：

 scrollTo(0, 1) 

由于chrome不会滚动，如果它不在scrollY位置0这将阻止chrome进行刷新。

如果它仍然不起作用，那么在页面加载时也要这样做。

Answer 12

纯js解决scheme。

 // Prevent pull refresh chrome var lastTouchY = 0; var preventPullToRefresh = false; window.document.body.addEventListener("touchstart", function(e){ if (e.touches.length != 1) { return; } lastTouchY = e.touches[0].clientY; preventPullToRefresh = window.pageYOffset == 0; }, false); window.document.body.addEventListener("touchmove", function(e){ var touchY = e.touches[0].clientY; var touchYDelta = touchY - lastTouchY; lastTouchY = touchY; if (preventPullToRefresh) { // To suppress pull-to-refresh it is sufficient to preventDefault the first overscrolling touchmove. preventPullToRefresh = false; if (touchYDelta > 0) { e.preventDefault(); return; } } }, false);