Question

如何以编程方式滚动div以使其内容居中？

这是我尝试过的，而且它无法正常工作

$("button").click(function () {
    var outerDiv = $("#outerDiv");
    var img = $("img");
    outerDiv[0].scrollTop = img.height() / 2;
    outerDiv[0].scrollLeft = img.width() / 2;
});

div的内容可以动态改变，可以调整大小这个小提琴只是为了得到一个问题的工作概念，所以我可以应用到实际生产代码的解决方案。

编辑：为了澄清，我希望在单击按钮时div的内容居中。不要将滚动顶部/左侧设置为50％，因为我已经有了。

编辑2 ：我已经更新了jquery和小提琴，将滚动设置为内容的一半。

我遇到的问题是我需要调整滚动点以抵消实际滚动条手柄宽度的一半。

Answer 1

outerDiv[0].scrollTop = img.height() / 2;
outerDiv[0].scrollLeft = img.width() / 2;

这不正确。向上和向左滚动也应取决于outerDiv的高度和宽度。

这有效：

outerDiv[0].scrollTop = img.height() / 2 - outerDiv.height()/2;
outerDiv[0].scrollLeft = img.width() / 2 - outerDiv.width()/2;

请参阅http://jsfiddle.net/zBv3v/3/

Answer 2

考虑Div大小

这是你在寻找什么？ http://jsfiddle.net/zBv3v/4/

$("button").click(function () {
    var outerDiv = $("#outerDiv");
    var img = $("img");
    outerDiv.scrollTop((img.height() - outerDiv.height())/2);
    outerDiv.scrollLeft((img.width() - outerDiv.width())/2);
});

Answer 3

您可以像这样触发该点击的功能（使用jQuery）：

$('#yourButton').click(function() {
    var div = $('#yourDiv');
    div.scrollTo(parseInt(div.height()/2));
    div.scrollLeft(parseInt(div.width()/2));
});

如何将可滚动的div滚动到确切的中心？

3 个答案: