jquery – 如何禁用橡皮筋在iOS网络应用程序?

前端之家收集整理的这篇文章主要介绍了jquery – 如何禁用橡皮筋在iOS网络应用程序?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这个:
  1. $('body').on('touchmove',function(e) { e.preventDefault(); });

工程,但将禁用滚动整个页面,这是远远不理想。

这个:

  1. $('*').on('touchstart',function(e){
  2. var element = $(this).get(0);
  3.  
  4. if ( element.scrollTop <= 0 ) element.scrollTop = 1;
  5. if ( element.scrollTop + element.offsetHeight >= element.scrollHeight ) element.scrollTop = element.scrollHeight - element.offsetHeight - 1;
  6. });

适用于具有滚动区域的页面。但是当没有什么要滚动它将再次显示橡皮筋。

所以我的问题:

如何禁用橡皮筋效果,仍然保持-webkit溢出滚动区域可滚动?

[更新]

最佳解决方

停用所有不可滚动元素(如标签栏或导航栏)上的滚动。

  1. anElement.addEventListener('touchmove',function( event ){ event.preventDefault() };

将滚动处理程序附加到可滚动元素(例如主要内容)。

  1. anElement.addEventListener('touchstart',function( event ){
  2. if( this.scrollTop === 0 ) {
  3. this.scrollTop += 1;
  4. } else if( this.scrollTop + this.offsetHeight >= this.scrollHeight ) {
  5. this.scrollTop -= 1;
  6. }
  7. }

解决方法

最近在SPA中进入相同的问题,其中< body>橡胶带减少了经验,但我需要在子区域滚动。非常感谢dSquared的建议,因为方法1最适合我。这里是我的小扩展他的建议,我实现在一个工作的项目,看起来一直在树上找到任何元素(不只是div)有.scroll类上:
  1. // Prevent rubber-banding of the body,but allow for scrolling elements
  2. $('body').on('touchmove',function (e) {
  3. var searchTerms = '.scroll,.scroll-y,.scroll-x',$target = $(e.target),parents = $target.parents(searchTerms);
  4.  
  5. if (parents.length || $target.hasClass(searchTerms)) {
  6. // ignore as we want the scroll to happen
  7. // (This is where we may need to check if at limit)
  8. } else {
  9. e.preventDefault();
  10. }
  11. });

这里是CSS的外观:

  1. body {
  2. height: 100%;
  3. overflow: hidden;
  4. }
  5. .scroll,.scroll-x {
  6. -webkit-overflow-scrolling: touch;
  7. }
  8. .scroll > *,.scroll-y > *,.scroll-x > * {
  9. -webkit-transform : translateZ(0);
  10. }
  11. .scroll { overflow: auto; }
  12. .scroll-y { overflow-y: auto; }
  13. .scroll-x { overflow-x: auto; }

你只需要一个库(jQuery或Zepto),你得到本机滚动与动量和身体上没有橡皮筋。此外,我已经添加了translateZ来修复一些问题,我已经与元素在滚动期间消失,它可以用于GPU accelerate your elements

BUT(这是一个大的但是),如dSquared指出,整个页面的橡皮筋,当滚动元素在其极限,并试图进一步滚动。就我个人而言,我认为这是一个失败,所以我继续努力,只是想尝试弄明白这一点。添加一个检查沿着OP的代码行可能是答案,但我没有试过。

更新(10/7/12):

经过大量的工作,我得到了以下代码在iOS6(没有测试过任何其他)。没有橡皮筋在身上,没有更多的问题,当在滚动区域的极限,它具有本机滚动性能。这显然是更多的代码,最初,但我认为这将给予最接近OP的目标的行为。

  1. (function registerScrolling($) {
  2. var prevTouchPosition = {},scrollYClass = 'scroll-y',scrollXClass = 'scroll-x',searchTerms = '.' + scrollYClass + ',.' + scrollXClass;
  3.  
  4. $('body').on('touchstart',function (e) {
  5. var $scroll = $(e.target).closest(searchTerms),targetTouch = e.originalEvent.targetTouches[0];
  6.  
  7. // Store prevIoUs touch position if within a scroll element
  8. prevTouchPosition = $scroll.length ? { x: targetTouch.pageX,y: targetTouch.pageY } : {};
  9. });
  10.  
  11. $('body').on('touchmove',function (e) {
  12. var $scroll = $(e.target).closest(searchTerms),targetTouch = e.originalEvent.targetTouches[0];
  13.  
  14. if (prevTouchPosition && $scroll.length) {
  15. // Set move helper and update prevIoUs touch position
  16. var move = {
  17. x: targetTouch.pageX - prevTouchPosition.x,y: targetTouch.pageY - prevTouchPosition.y
  18. };
  19. prevTouchPosition = { x: targetTouch.pageX,y: targetTouch.pageY };
  20.  
  21. // Check for scroll-y or scroll-x classes
  22. if ($scroll.hasClass(scrollYClass)) {
  23. var scrollHeight = $scroll[0].scrollHeight,outerHeight = $scroll.outerHeight(),atUpperLimit = ($scroll.scrollTop() === 0),atLowerLimit = (scrollHeight - $scroll.scrollTop() === outerHeight);
  24.  
  25. if (scrollHeight > outerHeight) {
  26. // If at either limit move 1px away to allow normal scroll behavior on future moves,// but stop propagation on this move to remove limit behavior bubbling up to body
  27. if (move.y > 0 && atUpperLimit) {
  28. $scroll.scrollTop(1);
  29. e.stopPropagation();
  30. } else if (move.y < 0 && atLowerLimit) {
  31. $scroll.scrollTop($scroll.scrollTop() - 1);
  32. e.stopPropagation();
  33. }
  34.  
  35. // If only moving right or left,prevent bad scroll.
  36. if(Math.abs(move.x) > 0 && Math.abs(move.y) < 3){
  37. e.preventDefault()
  38. }
  39.  
  40. // Normal scrolling behavior passes through
  41. } else {
  42. // No scrolling / adjustment when there is nothing to scroll
  43. e.preventDefault();
  44. }
  45. } else if ($scroll.hasClass(scrollXClass)) {
  46. var scrollWidth = $scroll[0].scrollWidth,outerWidth = $scroll.outerWidth(),atLeftLimit = $scroll.scrollLeft() === 0,atRightLimit = scrollWidth - $scroll.scrollLeft() === outerWidth;
  47.  
  48. if (scrollWidth > outerWidth) {
  49. if (move.x > 0 && atLeftLimit) {
  50. $scroll.scrollLeft(1);
  51. e.stopPropagation();
  52. } else if (move.x < 0 && atRightLimit) {
  53. $scroll.scrollLeft($scroll.scrollLeft() - 1);
  54. e.stopPropagation();
  55. }
  56. // If only moving up or down,prevent bad scroll.
  57. if(Math.abs(move.y) > 0 && Math.abs(move.x) < 3){
  58. e.preventDefault();
  59. }
  60.  
  61. // Normal scrolling behavior passes through
  62. } else {
  63. // No scrolling / adjustment when there is nothing to scroll
  64. e.preventDefault();
  65. }
  66. }
  67. } else {
  68. // Prevent scrolling on non-scrolling elements
  69. e.preventDefault();
  70. }
  71. });
  72. })(jQuery);

猜你在找的jQuery相关文章