美文网首页
ios滚动条穿透?

ios滚动条穿透?

作者: 心大的少年 | 来源:发表于2019-12-17 15:51 被阅读0次

记录一下做项目的时候遇到的奇怪的bug,

弹出层有滚动条的话滚到最顶部或者最底部如果继续滚动,会导致弹窗中的滚动不生效,所以这里只需要不让滚动条的scrollTop达到0或者最大值就好了

/**
 * 传递过来的参数是id还是class通过第一个是.还是#判断
 * @param modal 整个模态框的id或class
 * @param model 最里层内容的id或class
 */
export const iosScrollPierceThough = (modal, model) => {
  // 当前移动端是不是ios
  if((navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i))) {
    let node1 = document.getElementById('');
    let node2 = document.getElementById('');
    if (modal[0] === '#') {
      node1 = document.querySelector(model);
      node2 = document.querySelector(modal);
    } else {
      node1 = document.querySelectorAll(model)[0];
      node2 = document.querySelectorAll(modal)[0];
    }
    let maxScrollBottom = node1.scrollHeight - node1.clientHeight; // 算出scrollTop最大可以是多少
    node1.addEventListener('touchmove', function(e) { // 阻止冒泡
      e.stopPropagation();
    });
  // 当手指放到屏幕上但还没开始滑动的时候
    node1.addEventListener('touchstart', function(e) {
      if (node1.scrollTop >= maxScrollBottom) {
        node1.scrollTop = maxScrollBottom - 1;
      }
      if (node1.scrollTop === 0) {
        node1.scrollTop = 1;
      }
    });
    node2.addEventListener('touchmove', function(e) {
      if (node1.scrollTop === 0 || node1.scrollTop === maxScrollBottom) {
        e.stopPropagation();
      }
      if (node1.scrollTop >= maxScrollBottom) {
        node1.scrollTop = maxScrollBottom - 1;
      }
      if (node1.scrollTop === 0) {
        node1.scrollTop = 1;
      }
    })
    node2.addEventListener('touchmove', function (e) {
      var target = e.target;
      if (target != node1) {
        e.preventDefault();
      } else {
        e.stopPropagation();
      }
      if (node1.scrollTop === 0 || node1.scrollTop === maxScrollBottom) {
        e.stopPropagation();
        
      }
      if (node1.scrollTop >= maxScrollBottom) {
        node1.scrollTop = maxScrollBottom - 1;
      }
      if (node1.scrollTop === 0) {
        node1.scrollTop = 1;
      }
    }, false);
  }
}

这个实我的解决办法,里面有一些费代码,后面有时间再修改,这里仅仅记录一下,以免自己忘了。

相关文章

网友评论

      本文标题:ios滚动条穿透?

      本文链接:https://www.haomeiwen.com/subject/zdsunctx.html