Panzoom: Menggulir konten pandzoom

Dibuat pada 5 Okt 2015 · 2Komentar · Sumber: timmywil/panzoom

Halo,

Saya ingin menggulir dengan menggeser konten pandzoom.

Dalam proyek saya, gambar memiliki lebar: 100% dari viewport, dan ketika Inch saya ada di gambar pandzoom, tidak ada yang ditambahkan, logika. Tetapi apakah Anda memiliki tip untuk mengizinkan gulir meskipun pandzoom?

Contoh: Ketika gambar belum di-zoom? ketika gambar diperbesar tetapi gambar terhalang oleh batas wadah induk? Kapan gulir mewakili persentase tertentu dari bawah ke atas?

Terimakasih

Sumber

ShakurOo

Komentar yang paling membantu

Saya juga membutuhkan perilaku ini. Akan lebih baik jika ada bendera "panOnlyWhenZoomed" yang dapat Anda atur yang memungkinkan Anda untuk menggesek melewati panzoom saat sudah di minScale dan hanya mengaktifkan panning saat diperbesar.

Sementara itu Anda dapat memalsukan fungsionalitas dengan cukup mudah dengan memeriksa apakah panzoom ditingkatkan melewati nilai minScale Anda dan menyetel disablePan yang sesuai. Saya menguji ini di perangkat iOS dan di berbagai emulator perangkat Chrome dan tampaknya berfungsi dengan baik:

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

Sunting: Tweak sedikit agar berfungsi dengan baik di non-sentuh dan membuatnya sedikit lebih ramping

kiddailey pada 22 Okt 2015

👍2 🎉1 😄1

Semua 2 komentar

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

Sunting: Tweak sedikit agar berfungsi dengan baik di non-sentuh dan membuatnya sedikit lebih ramping

kiddailey pada 22 Okt 2015

👍2 🎉1 😄1

Saya setuju. Fungsi ini sangat penting, jika tidak lib agak tidak berguna .. terutama pada perangkat sentuh yang lebih kecil.
Ini bukan kasus yang sangat khusus, bahwa gambar memiliki lebar 100% pada perangkat tersebut dan saya pikir setiap pengguna akhir akan meninggalkan halaman jika diambil di dalam wadah panci gambar ini:\