Question

更新：我已经给了这几个镜头无济于事！现在我的jsfiddle到目前为止我的工作。

以下是用于“居中”“家庭”div的代码。看着它我意识到它不知道“home”div当前位于何处，因此它盲目地应用基于位于其左侧的视图中定位的阵列的移动。

    container.overscroll({
    showThumbs:  false,
    scrollLeft:  1125,
    scrollTop:   1125
});

// Center "home" div in viewport
var gear = $('#gear');
gear.click(function() {
    var $foo = $('.id0'),
        elWidth = $foo.width(),
        elHeight = $foo.height(),
        elOffset = $foo.offset();
    container
        .scrollTop(elOffset.top + elHeight/2 - viewportHeight/2)
        .scrollLeft(elOffset.left + elWidth/2 - viewportWidth/2);
});

在它中你可以看到彩色div数组不是以中心开始的（中心div用红色边框勾勒出来，按照视口边缘的箭头找到它，如果你愿意的话），我希望它是。我找到了Overscroll的选项，还有一个顶级＆amp;过度滚动对象的起始位置的左偏移量。不幸的是，它要求两者的整数看起来像它使用JQuery scrollTop＆amp; scrollLeft。也许我可以在那里插入一个预先计算的变量而不是一个直的整数？我现在已将它设置为1125px，每个都可以在视口中获取它至少。

理论上我认为它在过度滚动的对象上找出“home”div中心的坐标，并将其对准视口中心的计算坐标。这看起来像编程是什么，是解决问题的最有效方法？

Answer 1

将elOffset = $foo.offset();更改为elOffset = $foo.position()

.offset()返回元素相对于可见区域（视口）的位置。 .position()返回相对于包含元素（父元素）的位置。这就是为什么你无法计算滚动到左边和顶部的数量，因为你得到了错误的值。

我不能把它放在中心位置，但必须是让我脱离目标的盒子之间的边距，但这是我改变的另一部分：

container.scrollTop(elOffset.top - ((viewportHeight - elHeight) / 2)).scrollLeft(elOffset.left);

我updated fiddle在这里。

如何通过鼠标点击在溢出的父div中的视口中居div？

1 个答案: