移动端 ios Safari 问题及 一般解决方法

Posted 2020-09-13

在ios设备中 使用 overflow 会有卡顿，解决办法：-webkit-overflow-scrolling: touch;  /*消除在ios设备卡顿*/

在ios中的click事件不执行：解决办法：①：将目标元素 改为<a>或者<button>，②：给目标元素设置 cursor:pointer; ③：click事件 写为tounched事件

转： 在ios中 

使用overflow scroll情况下，到达最极端的情况时会拖动整个页面的解决办法

方法一，从网上找到的：

function preventOverScroll(scrollPane) { // See http://www.quirksmode.org/js/events_order.html var CAPTURE_PHASE = true; // happens first, outside to inside var BUBBLE_PHASE = false; // happens second, inside to outside   // These variables will be captured by the closures below var allowScrollUp = true, allowScrollDown = true, lastY = 0;   scrollPane.addEventListener (‘touchstart’, function (e) {   // See http://www.w3.org/TR/cssom-view/#dom-element-scrolltop allowScrollUp = (this.scrollTop > 0); allowScrollDown = (this.scrollTop < this.scrollHeight – this.clientHeight);   // Remember where the touch started lastY = e.pageY; }, CAPTURE_PHASE);   // If the touch is on the scroll pane, don’t let it get to the // body object which will cancel it scrollPane.addEventListener (‘touchmove’, function (e) { var up = (event.pageY > lastY); var down = !up; lastY = event.pageY;   // Trying to start past scroller bounds if ((up && allowScrollUp) || (down && allowScrollDown)) { // Stop this event from propagating, lest // another object cancel it. e.stopPropagation(); } else { // Cancel this event event.preventDefault(); } }, CAPTURE_PHASE); }

方法二自己想出来的，因为我发现非最极端（非最上或者最下时）时，就不会拖动整个页面，那么问题就简单了：

scrollPane.addEventListener(‘touchstart‘, function(){          if(this.scrollTop === 0){              //滚动到1              this.scrollTop =1;          }else if(this.scrollTop == this.scrollHeight - this.clientHeight){              //滚动到最低端-1              this.scrollTop =this.scrollHeight - this.clientHeight -1;          }      }, true);