禁用滚动，但保持缩放能力答案

【问题标题】：Disable scrolling, but maintain ability to zoom禁用滚动，但保持缩放能力
【发布时间】：2026-01-16 03:00:02
【问题描述】：

在我正在开发的响应式网站上，我有自己的小灯箱脚本，它可以全屏打开图像，同时保持它们的纵横比。这很简单，使用 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 上滚动？？

【问题讨论】：

您是否尝试设置溢出-x 和溢出-y 而不是溢出？或者，可以在#lbBlack div 本身而不是主体上设置溢出-x、溢出-y 或溢出属性。
刚刚试过了，也没用...
请稍等我发誓我以前经历过。让我在 jsFiddle 上摆弄一下。能否请您发布相关的html和css？
我什至会给你几个小时，因为我现在需要睡觉 :) 谢谢！
啊，好吧，哈哈。是的，如果你发布一些 html 和 css 来配合它，我会检查一下。

标签： javascript ios css safari lightbox

【解决方案1】：

好吧，拉斐尔，

这可能并不完美，但它应该能让你朝着正确的方向前进。我在 Android 上测试过，我处理 Apple 东西的伙伴目前不可用。滚动和其他移动被禁用，但您可以缩放。然而，一个问题是，当您实际上处于捏缩放过程中时，您可以四处移动图片。捏缩放完成后，您始终可以将图片重新捕捉到中心。（这甚至可能看起来很整洁）。

请注意，我向 jQuery 原型添加了一个方法，并向 jQuery.Event 原型添加了一个属性。

/*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');
        }

    });
}());

【讨论】：

这看起来棒极了，我会尽快试用并在这里提供反馈。我需要你的代码的原型库吗？
谢谢。它只使用 jQuery。
非常抱歉@orb - 我还没有时间 :( 我会尽快在这里更新，承诺！
我接受您的解决方案，尽管我还没有时间在现实生活中尝试，但我相信您的回答将帮助我解决问题。再次感谢！
好的，谢谢。如果您有任何问题，请在此处发布另一条消息。