请注意:由于我不太熟悉编码术语，我会尽力解释我的确切目的!
我们首先从一个页面开始，出于演示目的，我将其命名为one.html。该页面填充了 div。 div 的 width 和 height 由 percentage 测量，并有 padding。这些也是响应式的:
在这些 div 中是 one.html 内容，范围从图像和文本到什么都没有。我将用蓝色 对one.html 内容进行颜色编码。内容位于 div 的 left 侧或 right 侧:
问题来了:当一个人向上滚动时(紫色圆圈代表鼠标和触摸)，所有的内容一起向上滚动，的内容two.html(红色)滚动进来。此外，url 从 one.html 变为 two.html:
技术方面的东西:为了确保one.html 内容和two.html 内容不会在div 中晃来晃去，它会自动完成滚动。例如，滚动 http://u-p.co/aesop/ -- 看看它是如何自动完成滚动的？
这可能吗？另外，如果我启动一个 jsfiddle 是个好主意吗？
非常感谢您:)
最佳答案
我从未听说过在不重新加载页面的情况下更改 URL 的主要部分，但是您可以轻松地在现代浏览器上更改路径:https://stackoverflow.com/questions/20041302/how-to-change-url-without-page-refresh
这样做的缺点是，如果您将路径保存为书签，以后将无法返回。但是，有一种解决方法:
使用一些 PHP 来决定根据 URL 路径加载哪些内容。在提供任何内容之前，使用 $_SERVER['REQUEST_URI'] 获取 url，然后使用 parse_url($url) 解析它。
然后你可以使用路径来确定哪个位置应该是你的页面的起始位置。
在页面上，我会将所有位置保存在一个数组中。然后你可以创建一个变量来定义起始位置。这个变量可以用上面的 php 动态写入。
数组中的每个位置都有滚动位置(很可能基于内容 block 的位置)。
为了让所有内容顺利加载，您可能希望从加载起始位置和下一个位置的内容开始。因此，如果您从位置 2 开始，页面会加载 1、2 和 3。当滚动到 3 的事件被触发时，页面会加载 4，依此类推。
要让您的滚动以与您发布的链接类似的方式捕捉，您将设置一个“滚动事件监听器”。这个看起来不错:Scroll event listener javascript
您可以将监听器设置为在滚动事件触发时捕捉到下一个位置(在您的位置数组中)(您也可以为其设置动画以使其平滑)。这样它将转到下一个位置，而无需用户滚动一半，然后监听器将锁定，以便在滚动发生时不会再次触发。
此滚动监听器随后将控制位置、加载和 URL 的重写。然后，PHP 将允许用户返回到创建书签时存在的相同页面状态。
我希望这是有道理的:p
在第一条评论后编辑: 您可能希望从更像这样的结构开始 -
/* Normalize */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
text-decoration: none;
color: white;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
}
figure, figure.thumb, div, img {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
body{
position:absolute;
width:100%;
height:100%;
overflow:scroll;
}
div.wrap {
width:100%;
height:100%;
}
div.wrap article {
display: block;
width:100%;
height:100%;
}
/* demonstration purposes. not important. */
#one {
background: blue;
}
#two {
background: green;
}
#three {
background: red;
}
<body>
<div class="wrap" id="one">
<article>
Your dynamically loaded article content goes here.
<br />
This is your first page.
</article>
</div>
<div class="wrap" id="two">
<article>
Your dynamically loaded article content goes here.
<br />
This is your second page.
</article>
</div>
<div class="wrap" id="three">
<article>
Your dynamically loaded article content goes here.
<br />
This is your third page.
</article>
</div>
</body>
这样您实际上可以使用滚动条移动到下一个内容。随着新内容的加载，它会将新的 .wrap 分区写入您的页面。 您基本上会制作一个滚动加载器，将滚动条捕捉到预定位置。
关于javascript - 图中的内容一起滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27652266/