Browse Source

Fix iOS scrolling issue when create supply modal is open

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

45
supply.html

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

Loading…
Cancel
Save