开发杂记

Flutter 打包的Web在IOS的Safari浏览器侧滑会引起页面粘连且出现空白页面的解决办法

栏目

开发杂记

时间

2024-11-10

投稿

Admin

最后修改时间:2024-11-10

修改项目目录的web文件夹下的index.html

加入个脚本禁用左侧区域的滑动即可

  <script>
    function handleTouchMove(event, xStart, yStart) {
  var xDiff = xStart - event.touches[0].pageX;
  var yDiff = yStart - event.touches[0].pageY;

  // Prevent horizontal swipe
  if (xDiff > 20 && Math.abs(xDiff) > Math.abs(yDiff)) {
    event.preventDefault();
  }
}

var newHandleTouchMove = function (xStart, yStart) {
  return function (event) {
    handleTouchMove(event, xStart, yStart);
  };
}

document.addEventListener('touchstart', function (startEvent) {
  // Ignore multi-touch gestures
  if (startEvent.touches.length > 1) {
    return;
  }

  var xStart = startEvent.touches[0].pageX;
  var yStart = startEvent.touches[0].pageY;

  // Attach the touchmove event listener
  document.addEventListener('touchmove', newHandleTouchMove(xStart, yStart), { passive: false });
}, { passive: false });
  </script>
© UU-TOOL.COM
UU工具箱 好用且免费的在线工具箱