我的网站遇到一些问题。简而言之，我有一个编辑帖子的功能，允许用户通过拖放来重新排列帖子中图像的顺序。为了防止拖动过程中滚动干扰，我在 body 标签中添加了 Overflow:hidden 以防止向上或向下滚动。在桌面、Mac 和 Android 平台上一切正常，但在移动 safari 上效果不佳。
我尝试了在 Stack Overflow 上找到的各种解决方案，例如添加
<head><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1">或者添加CSS
html, body {position: relative, overflow: hidden}在 Mac 上，当我开始拖动正文时，溢出被隐藏了
在手机上的 Safari iOS 上，当我开始拖动图像时，如果向上拖动，屏幕会向上滚动，如果向下拖动，屏幕会向下滚动。这会影响调整图像位置的能力，因为我的屏幕不断上下移动，导致无法将图像拖动到所需位置。
我的js用于在拖动时对图像进行排序
function touchHandler(event) {
var touch = event.changedTouches[0];
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent({
touchstart: "mousedown",
touchmove: "mousemove",
touchend: "mouseup"
}[event.type], true, true, window, 1,
touch.screenX, touch.screenY,
touch.clientX, touch.clientY, false,
false, false, false, 0, null);
touch.target.dispatchEvent(simulatedEvent);
// event.preventDefault();
}
function init() {
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
}
function unInit() {
document.removeEventListener("touchstart", touchHandler, true);
document.removeEventListener("touchmove", touchHandler, true);
document.removeEventListener("touchend", touchHandler, true);
document.removeEventListener("touchcancel", touchHandler, true);
}
init();
// ソート機能
function sortContent(_elm, callback = null) {
if ($(_elm).length) {
var _listArray = [];
for (var _i = 0; _i < $(_elm).find('.sort_item').length; _i++) {
_listArray[_i] = $(_elm).find('.sort_item').eq(_i).attr('id').replace('list_', '');
}
$(_elm).sortable({
'start': function () {
// $('body').css('overflow', 'hidden');
if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
$('html, body').css({'position': 'relative', 'overflow': 'hidden'});
}
document.ontouchmove = function (e) {
e.preventDefault();
};
},
"opacity": 0.5, // ドラッグ中の透明度
"update": function (event, ui) { // ドラッグ完了後のコールバック
for (var _i = 0; _i < $(_elm).find('.sort_item').length; _i++) {
var _sort = $(_elm).find('.sort_item').eq(_i).attr('id').replace('list_', '');
_listArray[_i] = _sort;
}
var numberOrder = 1;
$('.ui-sortable .sort_item').each(function () {
$(this).find('.order-number').text(numberOrder);
numberOrder++;
});
},
'stop': function () {
// $('body').css('overflow', 'auto');
if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
$('html, body').css('overflow', 'auto');
}
document.ontouchmove = function () {
return true;
};
}
});
}
}
sortContent('.list_images_wrapper .list_images > ul');
我通过使用
setPropertyoverflow-xoverflow-ydocument.body.style.setProperty('overflow-x', 'hidden')
document.body.style.setProperty('overflow-y', 'hidden')
document.body.style.setProperty('height', `${window.innerHeight}px`)
如果您有潜在的CSS干扰，您可以将它们设置为“重要”，尽管最好不要这样做：
document.body.style.setProperty('overflow-x', 'hidden', 'important')
document.body.style.setProperty('overflow-y', 'hidden', 'important')
document.body.style.setProperty('height', `${window.innerHeight}px`, 'important')
如果您希望之后重新启用滚动，请将它们设置为
autovisibledocument.body.style.setProperty('overflow-x', 'auto')
document.body.style.setProperty('overflow-y', 'auto')
document.body.style.setProperty('height', 'auto')