在我正在开发的响应式网站上，我有自己的小灯箱脚本，它可以全屏打开图像，同时保持它们的纵横比。非常简单，使用 2 个 div(外部全屏 div 带有黑色背景“lbBlack”，内部 div 带有图像“lbImg”):
//super small lightbox ;)
$("#posts").on("click", ".img", function(event) {
$('#lbBlack').css('top',$(document).scrollTop());
$('#lbImg').attr('src', $(this).attr('src'));
$('#lbBlack').css('width',$(window).width());
$('#lbBlack').css('height',window.innerHeight);
$('#lbBlack').fadeIn(500);
$('#lbImg').css('margin-top',((window.innerHeight-$('#lbImg').height()))/2);
document.body.style.overflow="hidden";
document.ontouchmove = function(event){
event.preventDefault();
}
$('#lbBlack').on("click", "#lbImg, body", function(event) {
$('#lbBlack').fadeOut(500);
document.body.style.overflow="visible";
document.ontouchmove = function(event){
return true;
}
});
});
对于 iOS，我必须添加 ontouchmove-prevention，因为 body-overflow-hidden 不足以避免在灯箱打开时滚动。
现在是上面这个有效解决方案的“大问题”:我想启用图像缩放。这是用“ontouchmove”代码阻止的。
有什么想法吗？
HTML 代码:
<body>
<div id="lbBlack">
<img id="lbImg">
</div>.....
CSS 代码:
#lbBlack {
display: none;
position: absolute;
left: 0;
background-color: black;
z-index: 2001;
text-align: center;
}
#lbBlack #lbImg {
max-height: 100%;
max-width: 100%;
position: relative;
}
所以我认为我正在寻找的是一种在保持缩放可能性的同时防止滚动的方法。我还是不明白为什么 body-overflow:hidden 仍然可以在 iOS 上滚动？？
最佳答案
嗯，拉斐尔，
这可能并不完美，但它应该能让您朝着正确的方向前进。我在 Android 上测试过，我处理 Apple 东西的伙伴目前不可用。滚动和其他移动被禁用，但您可以缩放。然而，一个问题是，当您实际处于缩放过程中时，您可以四处移动图片。缩放完成后，您始终可以将图片拍回中心。 (这甚至可能看起来很整洁)。
请注意，我向 jQuery 原型(prototype)添加了一个方法，向 jQuery.Event 原型(prototype)添加了一个属性。
/*global console, $*/
/*jslint browser: true*/
(function () {
"use strict";
$.fn.detectPinch = function () {
var numTouches = 0;
// each finger touch triggers touchstart
// (even if one finger is already touching)
$(document).on('touchstart', function (event) {
// if numTouches is more than 1, reset it to 0
// or else you can have numTouches >= 2 when
// actually only one finger is touching
numTouches = (numTouches > 1) ? 0 : numTouches;
// if numTouches is 0 or 1, increment it
numTouches = (numTouches < 2) ? numTouches += 1 : 2;
console.log(numTouches + ' start');
}).on('touchend', function (event) {
// another safety check: only decrement if > 0
numTouches = (numTouches > 0) ? numTouches -= 1 : 0;
console.log(numTouches + ' end');
});
// all event objects inherit this property
$.Event.prototype.isPinched = function () {
return (numTouches === 2) ? true : false;
};
return this;
};
$(document).ready(function (event) {
// call the method we added to the prototype
$(document).detectPinch();
$("#posts").on("click", "img", function (event) {
$(this).css('visibility', 'hidden');
$('#lbBlack').css('top', $(document).scrollTop());
$('#lbImg').attr('src', $(this).attr('src'));
$('#lbBlack').css('width', $(window).width());
$('#lbBlack').css('height', window.innerHeight);
$('#lbBlack').fadeIn(500);
$('#lbImg').css('margin-top', ((window.innerHeight - $('#lbImg').height())) / 2);
document.body.style.overflow = "hidden";
});
$('#lbBlack').on("click", "#lbImg, body", function (event) {
$('#lbBlack').fadeOut(500);
$('#posts img').css('visibility', 'visible');
document.body.style.overflow = "visible";
});
}).on('touchmove', function (event) {
// prevent one-finger movements
if (!event.isPinched()) {
event.preventDefault();
console.log('prevented');
}
});
}());
关于javascript - 禁用滚动，但保持缩放能力，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16004616/