Panzoom: 滚动浏览 pandzoom 内容

创建于 2015-10-05 · 2评论 · 资料来源: timmywil/panzoom

你好，

我想通过在 pandzoom 内容上滑动来滚动。

在我的项目中，图像的宽度：视口的 100%，当我的英寸在 pandzoom 图像上时，没有任何附加，逻辑。但是，尽管 pandzoom 允许滚动，您有什么提示吗？

示例：当图像尚未缩放时？当图像具有缩放但图像被父容器的限制阻止时？当滚动代表从下到上一定百分比？

谢谢

资料来源

ShakurOo

最有用的评论

我也需要这种行为。如果您可以设置一个标志“panOnlyWhenZoomed”，这将允许您在已经处于 minScale 时滑过 panzoom 并且仅在放大时启用平移，那就太好了。

同时，您可以通过检查 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 于 2015-10-22

👍2 🎉1 😄1

所有2条评论

我也需要这种行为。如果您可以设置一个标志“panOnlyWhenZoomed”，这将允许您在已经处于 minScale 时滑过 panzoom 并且仅在放大时启用平移，那就太好了。

// 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 于 2015-10-22

👍2 🎉1 😄1

我同意。此功能非常重要，否则 lib 有点没用.. 尤其是在较小的触摸设备上。
这不是一个非常特殊的情况，图像在这些设备上具有 100% 的宽度，我认为每个最终用户都会离开页面，以防在此图像平移容器中被捕获：\

thomasfrobieter 于 2016-04-06

此页面是否有帮助？

0 / 5 - 0 等级

Panzoom: 滚动浏览 pandzoom 内容

最有用的评论

所有2条评论

相关问题