Browse Source

Fix iOS scrolling issue when create supply modal is open

Boss
Default User 4 weeks ago
parent
commit
5e80c74250
  1. 45
      supply.html

45
supply.html

@ -461,6 +461,8 @@
flex-direction: column;
z-index: 1000;
overflow: hidden;
/* 防止iOS滚动穿透 */
touch-action: none;
}
.modal.active {
@ -478,15 +480,29 @@
box-shadow: none;
display: flex;
flex-direction: column;
/* 启用iOS原生滚动 */
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
/* 允许触摸操作 */
touch-action: auto;
}
.modal-body {
flex: 1;
overflow-y: auto;
/* 启用iOS原生滚动 */
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
/* 允许触摸操作 */
touch-action: auto;
}
/* iOS滚动穿透修复 */
body.modal-open {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
}
.modal-header {
@ -5816,10 +5832,13 @@
}, { passive: true });
modalContent.addEventListener('touchmove', function(e) {
if ((this.allowUp && e.touches[0].pageY < e.changedTouches[0].pageY) ||
(this.allowDown && e.touches[0].pageY > e.changedTouches[0].pageY)) {
e.stopPropagation();
} else {
// 检查滚动位置,只在需要时阻止滚动
const isAtTop = (this.scrollTop === 0);
const isAtBottom = (this.scrollTop === this.scrollHeight - this.clientHeight);
// 如果在顶部且尝试向上滚动,或在底部且尝试向下滚动,阻止滚动
if ((isAtTop && e.touches[0].pageY > e.changedTouches[0].pageY) ||
(isAtBottom && e.touches[0].pageY < e.changedTouches[0].pageY)) {
e.preventDefault();
}
}, { passive: false });
@ -5976,12 +5995,25 @@
// 定义触摸事件监听器
touchMoveListener = function(e) {
// 只阻止页面滚动,不阻止模态框内的滚动
// 获取触摸目标
const target = e.target;
const createSupplyModal = document.getElementById('createSupplyModal');
// 如果触摸目标在模态框内,允许滚动
// 如果触摸目标在模态框内,检查是否需要阻止滚动
if (createSupplyModal && createSupplyModal.contains(target)) {
// 获取模态框内容元素
const modalContent = document.querySelector('#createSupplyModal .modal-content');
if (modalContent) {
// 检查滚动位置,只在需要时阻止滚动
const isAtTop = (modalContent.scrollTop === 0);
const isAtBottom = (modalContent.scrollTop === modalContent.scrollHeight - modalContent.clientHeight);
// 如果在顶部且尝试向上滚动,或在底部且尝试向下滚动,阻止滚动
if ((isAtTop && e.touches[0].pageY > e.changedTouches[0].pageY) ||
(isAtBottom && e.touches[0].pageY < e.changedTouches[0].pageY)) {
e.preventDefault();
}
}
return;
}
@ -6014,6 +6046,7 @@
document.body.style.position = '';
document.body.style.width = '';
document.body.style.height = '';
document.body.style.touchAction = '';
// 恢复iOS页面滚动
restoreiOSScrolling();

Loading…
Cancel
Save