Javascript 当存在'；右边有更多内容

我一直在开发我的新公文包/网站，并决定设计一个基本上是一个大的索引页面，水平滚动以显示不同的部分，垂直滚动以显示部分的内容。集装箱和箱内的箱子都有固定的宽度。容器是相对放置的，内部的箱子是向左浮动并相对放置的

我现在的问题是-我如何使它，无论用户打开网站时浏览器窗口的大小，甚至在重新调整大小时，第一个框在浏览器窗口中水平居中显示，而不显示其右侧的内容（用户可以使用按钮水平滚动到的内容）

我的网站的灵感来自这个网站 我已经检查了代码，我相信他们正在使用JavaScript和负边距；但我的Javascript知识非常基础，我并不真正理解如何有效地实现这些负边距

如果有人能为COS网站解释一下它是如何工作的，或者甚至能想出一个像我这样的noobie可以使用的更简单的替代方案，我将不胜感激

---

谢谢你，请随时让我发布任何你认为有助于更好地理解问题的内容

您应该使用jQuery插件

---

将

div

标签置于屏幕中央很容易。将其css类中的

margin

属性设置为：

margin:0px auto;

至于剩下的问题，这是jQuery的一个例子（在我看来）。请查看此链接：

还有谷歌jQuery教程（您需要先学习框架），然后更具体地说，“单页网站”和“jQuery Paralax”

---

祝你好运

这真的很简单，你不用担心

您需要在网格系统上工作。（您可以使用不同大小的列，但如果一切都很好且呈方形，则更简单。）在HTML中创建一个容器

div

和一堆子“box”

div

s：

<div id="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <br />
    <div class="box"></div>
    <div class="box "></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

$("#container").animate({ scrollTop: 400, scrollLeft: 800 }, "slow"); //with animation
$("#container").scrollTop(400).scrollLeft(800); //without animation

---

然后，要使用Javascript滚动到某个位置，请执行以下操作：

<div id="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <br />
    <div class="box"></div>
    <div class="box "></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

$("#container").animate({ scrollTop: 400, scrollLeft: 800 }, "slow"); //with animation
$("#container").scrollTop(400).scrollLeft(800); //without animation

您需要使用该代码。这很值得，因为它隐藏了使用Javascript滚动时浏览器的不一致性

---

如果要使用浏览器的滚动条，则需要将主体用作容器。它更复杂，因为您没有指定的宽度和高度。没有办法对每个用户隐藏元素（当然），有些用户的屏幕分辨率非常高

基本上，在每个框上加一个边距，这样你就可以在框的周围留出一些空间。通过一些快速的JS计算，您可以计算出每个框的位置，并将其置于屏幕中央

以下是所有感兴趣的人的相关JS：

$("#scroll").click(function() { scrollCenter("#target"); });
scrollCenter("#home", 0);

function scrollCenter(target, duration) {
    if (duration == undefined) duration = "slow";
    target = $(target);

    var offset = target.offset();
    var top = offset.top - ($(window).height() - target.height()) / 2;
    var left = offset.left - ($(window).width() - target.width()) / 2;

    $("html, body").animate({ scrollTop: top, scrollLeft: left }, duration);    
}

准备好了。调用

scrollCenter（“#home”，0）

会强制页面在加载时将第一个框居中。你甚至不应该注意到跳跃

---

快乐编码

您需要使用javascript来实现这个-签出jQuery，它很容易学习。然后在页面加载时调整内容容器的大小-例如，

$（文档）.ready（函数（）{$（'.content container'）.width（$（窗口）.width（）；}）

谢谢您的帮助！我使用了一个scrollTo，但我会尝试这个，让你知道它是如何工作的一个小问题@primatology:u尝试了这个例子，创建的框确实居中，但它有自己的一组滚动条。是否可以对其进行调整，以便使用浏览器窗口滚动条完成滚动？