里面的内容滚动到一起？

请注意：由于我对编码术语不太熟悉，因此我会尽我所能解释我正在做什么！里面的内容滚动到一起？

我们首先从一个页面开始，为了演示目的，我将其称为one.html。该页面使用div填充。 div的width和height由percentage测量，并且具有padding。这些都是有求必应，太： divs

里面这些divs是one.html内容，范围从图片和文字，什么都没有。我会在蓝色的颜色代码one.html内容。内容是否在left侧或div的right侧： enter image description here

现在继承人的问题：当一个人向上滚动（紫色圆圈代表鼠标和触摸），所有的内容向上滚动在一起，并为two.html内容（颜色为红色）在卷轴此外，从网址云one.html到two.html： enter image description here

技术性的东西：保证one.html内容和two.html内容不会在div中悬停，它会自动完成滚动。例如，滚动http://u-p.co/aesop/ - 看它如何自动完成滚动？

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

预先感谢您:)

来源

2014-12-26 kenhimself

我从来没有听说过改变URL的主要部分无需重新加载页面的非常多，但是你可以很容易地改变现代浏览器的路径：https://stackoverflow.com/questions/20041302/how-to-change-url-without-page-refresh

的这是因为如果将路径保存为书签，则以后无法返回。但是，有一种解决方法：
使用某些PHP根据URL路径决定要加载的内容位。在提供任何内容之前，请使用$ _SERVER ['REQUEST_URI']获取URL，然后使用parse_url（$ url）解析它。然后，您可以使用路径来确定哪个位置应该是页面的起始位置。

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

为了让您的滚动以与发布的链接相似的方式捕捉，您将设置一个“滚动事件侦听器”。这看起来不错：Scroll event listener javascript
当滚动事件触发滚动事件（您可以为其设置动画效果以使其平滑时），您可以将侦听器设置为捕捉到下一个位置（在您的位置数组中）。这样，它将进入下一个位置，而用户不必在那里翻动一半，然后监听器将锁定，以便在滚动发生时不会再次触发。

这个滚动监听器将控制位置，加载和URL的重写。然后，PHP将允许用户返回到制作书签时存在的相同页面状态。

我希望这是SENCE：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分部写入您的页面。你基本上会制作一个滚动加载器，将滚动对齐到预定位置。

来源

2014-12-26 03:38:00

我将不得不花一分钟阅读并理解你写的内容，但是这里是我目前正在使用的jsfiddle：http://jsfiddle.net/kenhimself/75g017p8/ – kenhimself

我看着你的小提琴和上面做了一个编辑。 –

里面的内容滚动到一起？

回答

相关问题