Panzoom: Прокрутка содержимого pandzoom

Созданный на 5 окт. 2015 · 2Комментарии · Источник: timmywil/panzoom

Привет,

Я хотел бы прокручивать, проводя по содержимому pandzoom.

В моем проекте изображение имеет ширину: 100% области просмотра, и когда мой дюйм находится на изображении pandzoom, ничего не происходит, логика. Но есть ли у вас какой-нибудь совет, как разрешить прокрутку, несмотря на pandzoom?

Пример: когда изображение еще не увеличено? когда изображение имеет масштабирование, но изображение заблокировано пределами родительского контейнера? Когда прокрутка представляет собой определенный процент снизу вверх?

Спасибо вам

Источник

ShakurOo

Самый полезный комментарий

Мне тоже нужно было такое поведение. Было бы неплохо, если бы был флаг «panOnlyWhenZoomed», который вы могли бы установить, что позволило бы вам прокручивать панораму, когда она уже находится в minScale, и включать панорамирование только при увеличении.

В то же время вы можете довольно легко подделать функциональность, проверив, увеличен ли масштаб panzoom за пределы вашего значения minScale, и соответствующим образом установив disablePan. Я протестировал это на устройствах iOS и в различных эмуляторах устройств Chrome, и, похоже, все работает нормально:

// Set up panzoom container, making sure to disablePan by default
var $panzoom = $(".panzoom").panzoom({
    minScale: 1,
    disablePan: true
});

// After a zoom event, check zoomed state and reset the disablePanning
$panzoom.on('panzoomzoom', function(e, panzoom, scale, options) {
    $panzoom.panzoom("option", "disablePan", 
        Math.abs(scale - options.minScale) < 0.0001);
});

Редактировать: немного подправил его, чтобы он правильно работал как без сенсорного экрана, так и сделал его немного тоньше.

kiddailey 22 окт. 2015

👍2 🎉1 😄1

Все 2 Комментарий

// Set up panzoom container, making sure to disablePan by default
var $panzoom = $(".panzoom").panzoom({
    minScale: 1,
    disablePan: true
});

// After a zoom event, check zoomed state and reset the disablePanning
$panzoom.on('panzoomzoom', function(e, panzoom, scale, options) {
    $panzoom.panzoom("option", "disablePan", 
        Math.abs(scale - options.minScale) < 0.0001);
});

kiddailey 22 окт. 2015

👍2 🎉1 😄1

Я согласен. Эта функция очень важна, иначе библиотека бесполезна, особенно на небольших сенсорных устройствах.
Это не особый случай, когда изображение имеет ширину 100% на этих устройствах, и я думаю, что каждый конечный пользователь покинет страницу, если он будет захвачен внутри этого контейнера панорамирования изображения: \