Question

有一个固定容器，用作我内容的视口。内容是固定大小的<div>元素。视口大小绑定到窗口，如果用户调整窗口大小，则可能会更改。我使用jQuery.panzoom库来处理平移和缩放，让用户查看他们想要的内容部分。现在我需要以下功能，但无法找到它们：

内容绝不能小于在视口中完全可见的要求。这似乎是使用minScale选项完成的。我只需要连接resize事件来更新minscale值。
如果相对边缘上有空的空间，则不得将内容拖出到一条边。这意味着，如果内容足够小以至于完全可见，则必须完全可见。必须居中，以便在缩小时内容始终处于相同位置。

它就像一个图片浏览器，它最初缩放图像以使其适合并居中。用户可以放大，但不能缩小比初始视图更远的位置。只是我的内容不是图像而是更复杂的HTML元素。

这是我到目前为止所做的事情：

<div id="room-wrapper" style="position: fixed; top: 0; left: 150px; right: 0; bottom: 0;">
    <div id="room" style="width: 800px; height: 600px;">
        Content here.
    </div>
</div>

<script>
    var roomWrapper = $("#room-wrapper");
    // Set up options
    var minScaleX = roomWrapper.innerWidth() / 800;
    var minScaleY = roomWrapper.innerHeight() / 600;
    var minScale = Math.min(minScaleX, minScaleY);
    var panzoom = $("#room").panzoom({
        startTransform: "scale(" + minScale + ")",
        minScale: minScale,
        //contain: "invert",
        increment: 0.1
    });
    // Compensate strange offset, doesn't work
    panzoom.panzoom("pan", 150, 0, {
        animate: false,
        silent: true
    });
    // Mouse wheel zooming
    panzoom.parent().on("mousewheel.focal", function (e) {
        e.preventDefault();
        var delta = e.delta || e.originalEvent.wheelDelta;
        var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
        panzoom.panzoom("zoom", zoomOut, {
            animate: true,
            focal: e
        });
    });
</script>

内容最初正确缩放，但偏移到顶部和左侧。我不知道偏移的来源。此外，还没有平移禁令。评论contain可能是相关的，但我不了解其任何文档。

我需要在代码中修复哪些内容才能满足上述要求？我想这些都是非常基本的，很多人都需要它们，但是没有例子。

jQuery panzoom适合和居中

0 个答案: