Отключить прокрутку, но сохранить возможность масштабирования

На адаптивном сайте, который я разрабатываю, у меня есть собственный маленький скрипт-лайтбокс, который открывает изображения в полноэкранном режиме, сохраняя их пропорции. Это довольно просто, использует 2 div (внешний fullscreen-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".

Есть идеи?

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;
}

Поэтому я думаю, что я ищу метод предотвращения прокрутки при сохранении возможности увеличения. Я до сих пор не понимаю, почему переполнение тела: скрытый по-прежнему имеет возможность прокрутки на iOS??

Источник

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

    });
}());
Источник
Другие вопросы по тегам