Question

请注意：由于我对编码术语不太熟悉，我会尽力解释我的目标！

我们首先从一个页面开始，出于演示目的，我将其称为one.html。该页面填充了div。 div width和height由percentage衡量，并且padding。这些也是响应性的： divs

这些divs内容是one.html内容，其范围从图像和文字到任何内容。我会在蓝色中为one.html内容添加颜色代码。内容位于left的{{1}}侧或right侧： enter image description here

现在提出问题：当一个人向上滚动时（紫色圆圈代表鼠标和触摸），所有内容一起向上滚动，{{1 （以红色着色）滚动。此外，网址从one.html变为two.html： enter image description here

技术内容：为确保div内容和two.html内容不会在div中悬挂，它会自动完成滚动。例如，滚动http://u-p.co/aesop/ - 看看它如何自动完成滚动？

这可能吗？另外，如果我开始使用jsfiddle会是个好主意吗？

非常感谢您提前:)）

Answer 1

我没有听说过在没有网页重新加载的情况下更改网址的主要部分，但您可以轻松更改现代浏览器的路径：https://stackoverflow.com/questions/20041302/how-to-change-url-without-page-refresh

这方面的缺点是，如果将路径保存为书签，则以后无法返回。但是，有一种解决方法：
使用一些PHP根据URL路径决定要加载哪些内容。在您投放任何内容之前，请使用$ _SERVER [＆＃39; REQUEST_URI＆＃39;]获取网址，然后使用parse_url（$ url）进行解析。然后，您可以使用该路径确定哪个位置应该是页面的起始位置。

在页面上，我将所有位置保存在一个数组中。然后，您可以创建一个允许您定义起始位置的变量。这个变量可以用上面的php动态编写。数组中的每个位置都有滚动位置（很可能基于内容块的位置）为了使所有内容顺利进行，您可能希望首先加载起始位置和下一个位置内容。因此，如果从位置2开始，页面将加载1,2和3.当触发滚动到3的事件时，页面将加载4，依此类推。

要使您的滚动按照与您发布的链接类似的方式进行捕捉，您将设置一个＆＃34;滚动事件监听器＆＃34;。这个似乎很好：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分区写入您的页面。你基本上会制作一个滚动加载器，它将滚动条捕捉到一个预定的位置。

里面的内容滚动在一起？

1 个答案: