Javascript 以整个网页为中心（在一个非常广泛的网站上）？

我有一个很宽的网页（3078像素）和很长的网页（1540像素）。 页面有一个大div，其中包含6个div，分别位于3列和两行（每行本身就是一个单独的div）。 当页面加载时，它会在右上角显示左上角的div（box1），并可以选择向下或向右滚动以查看其余内容

我想让它以负载为中心，也就是说，我希望中间列（框2）在加载时显示在页面的中间，选择剩下的内容向左和向右滚动。 是否有任何脚本或CSS/HTML组合允许我选择加载时在浏览器中显示的内容？从本质上讲，我尝试做的是类似于在浏览器窗口中居中整个身体。我曾考虑在中间的div（box2）上附加一个带有名称的锚点，但我仍然不知道Javascript如何让它选择该div作为左上角的加载对象。 请让我知道，如果这是一个有点混乱，我可以做一个草图来解释我的意思，如果这可以帮助！（下面是JSFIDLE链接）

以下是CSS：

正文{
边际：0px；
填充：0px；
文本对齐：居中；
背景：黑色；
}
#第1栏、第2栏、第3栏、第4栏、第5栏、第6栏{
边际：0px；
填充：0px；
浮动：左；
显示：内联块；
宽度：1024px；
高度：768px；
背景：透明；
边框：1px红色实心；
}
#在上面{
边际：0px；
填充：0px；
浮动：左；
显示：内联块；
宽度：3078像素；
高度：770px；
背景：透明；
}
#下面{
边际：0px；
填充：0px；
浮动：左；
显示：内联块；
宽度：3078像素；
高度：770px；
背景：透明；
}
#主机箱{
保证金：0自动；
填充：0px；
浮动：左；
显示：内联块；
宽度：3078像素；
高度：1540px；
背景：透明；
}

以及HTML：

<div id="mainbox">
    <div id="above">
        <div id="box1"></div>
        <div id="box2"></div>
        <div id="box3"></div>
    </div>
    <div id="below">
        <div id="box4"></div>
        <div id="box5"></div>
        <div id="box6"></div>
    </div>
</div>

还有一把JS小提琴：

---

一个类似的问题是（消除水平滚动的痛苦）–如果我有一个非常长的页面，垂直滚动，我如何获得它，使其在浏览器窗口中与页面底部一起加载，以便实际上，您需要向上滚动以查看其余内容？

您必须使用jQuery scrollto库

---

您必须使用jQuery scrollto库

---

您需要使用一些查询来获取这些信息

编辑

您的CSS
我还建议你清理你的css，那里有很多不必要的属性。你可以选择使用这个

body {
    margin: 0 auto;
    padding: 0;
    text-align: center;
    background: #222;
    overflow: scroll;
}

#box1, #box2, #box3, #box4, #box5, #box6 {
    margin: 0;
    padding: 0;
    float: left;
    display: block;
    width: 1024px;
    height: 768px;
    border: 1px red solid;
}

#box2 {
    background-color: aqua; /* only for demo */
}

#above {
    margin: 0px;
    padding: 0px;
    display: block;
} 

#below {
    margin: 0px;
    padding: 0px;
    display: block;
}

#mainbox {
    padding: 0;
    width: 3078px;
    height: 770px;
}

/* For modern browsers */
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}

.clearfix:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.clearfix {
    *zoom:1;
}

---

您需要使用一些查询来获取这些信息

编辑

您的CSS
我还建议你清理你的css，那里有很多不必要的属性。你可以选择使用这个

body {
    margin: 0 auto;
    padding: 0;
    text-align: center;
    background: #222;
    overflow: scroll;
}

#box1, #box2, #box3, #box4, #box5, #box6 {
    margin: 0;
    padding: 0;
    float: left;
    display: block;
    width: 1024px;
    height: 768px;
    border: 1px red solid;
}

#box2 {
    background-color: aqua; /* only for demo */
}

#above {
    margin: 0px;
    padding: 0px;
    display: block;
} 

#below {
    margin: 0px;
    padding: 0px;
    display: block;
}

#mainbox {
    padding: 0;
    width: 3078px;
    height: 770px;
}

/* For modern browsers */
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}

.clearfix:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.clearfix {
    *zoom:1;
}

---

你为什么不在这上面加些滑块呢？它将只显示你想要的内容，你将能够在其他内容之间滑动？在每个div中也会有其他内容，这是交互式的（带有onhover/onclick效果的图像），所以我认为滑块的功能不起作用。如果你有一些链接，也许我可以看看？你所描述的是一个水平的网站，而不是一个垂直的网站。水平web站点并不常见，通常是避免的，但仍然存在，事实上非常令人印象深刻，但是由经验丰富的开发人员创建。我建议您阅读以下内容。类似这样的内容：样式来自这里：只是将其设置为居中。为什么不使用一些滑块将其输入？它将只显示你想要的内容，你将能够在其他内容之间滑动？在每个div中也会有其他内容，这是交互式的（带有onhover/onclick效果的图像），所以我认为滑块的功能不起作用。如果你有一些链接，也许我可以看看？你所描述的是一个水平的网站，而不是一个垂直的网站。水平web站点并不常见，通常是避免的，但仍然存在，事实上非常令人印象深刻，但是由经验丰富的开发人员创建。我建议你阅读以下内容。类似这样的内容：样式来自这里：只是使其居中。