奇怪的 CSS 滚动问题，无法滚动到左上角答案

【问题标题】：Odd CSS Scrolling issue, can't scroll to top left奇怪的 CSS 滚动问题，无法滚动到左上角
【发布时间】：2011-12-03 07:27:42
【问题描述】：

我在 div 中有一个 div，我希望能够滚动内部 div。外部 div 是内部 div 的视口。内部潜水垂直和水平居中，外部 div 设置为overflow:auto，因此如果需要，可以滚动。

当内部 div 大于外部并且我需要滚动时，我可以到达右下角，但我无法到达左上角。

Here 是我目前所拥有的副本。将大小更改为Force Issue，使内部 div 变大。

CSS - #Stack 的宽度、高度、margin-top 和 margin-left 是通过 javascript 设置的。

/* The Stack */
#StackWrapper
{
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 330px;
    right: 5px;
    overflow: auto;
}

#Stack
{
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid black;
    background-image: url('../images/stripes.png');
}

【问题讨论】：

标签： css

【解决方案1】：

您的 DTD 声明与样式表一起设置在正文中（并且未正确完成）。

DTD Delcaration 应该在标签之上。

这样做可以解决怪癖模式的一些问题或定位不正确的东西。

要更正定位，您应该更改以下 css 行

element.style { (set by jquery for the selection )
 height: 768px;
 margin: 0;
 padding: 0;
 width: 1024px;
}
#Stack {
 background-image: url("../images/stripes.png");
 border: 1px solid black;
 position: absolute;
}

您必须记住，所有内容都应该有 0 边距和填充，因此它从左上角开始，到右下角结束。您的页边距导致截断。

如果您希望滚动条居中，您可能需要查看 jquery 以将滚动条定位到中间。

快速 JQuery 将您的 div 滚动到中心

$("div#StackWrapper").scrollLeft(width/2);
$("div#StackWrapper").scrollTop(height/2);

【讨论】：

我修复了 DTD，这是我的愚蠢错误。至于其余的，如果它小于包装器，我需要前 50%、左 50% 和负边距以使 div 在包装器中居中。我看不出这对滚动有何影响，overflow:auto 应该看到边界框外有东西让我滚动。
将其更改为 margin: auto 并添加 jquery 滚动。当我删除负边距和顶部/左侧时，它对我来说很好。
好吧，这解决了滚动问题。似乎溢出仅适用于右侧和底部，而不是左侧或右侧（带有负边距）。当内部 div 小于外部 div 时，将边距设置为内部 div 水平自动居中，而不是垂直居中。