1

Just wondering if it would be possible to scroll a page from top to top indefinitely ? Not going straightly back to the top with #a but showing the top below the bottom after reaching it, also meaning you can see the bottom above the top by scrolling up. A 3d cylinder page ? Sadly all I found was about blog style infinite top to bottom scroll.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta charset="utf-8" />
  <title>infinitescroll</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <style>
body {
  background: #000;
  margin:0;
  text-align: center;
  overflow-x:hidden;
}
#frame {
  width: 100%;
  height: 100%;
}
.strip div {
  position: relative;
  text-align:center; 
  height: 200px;
}
.strip #div01 {
 background-color:#942192;
}
.strip #div02 {
 background-color:#5228cc;
}
.strip #div03 {
 background-color:#0433ff;
}
.strip #div04 {
 background-color:#009292;
}
.strip #div05 {
 background-color:#00f900;
}
.strip #div06 {
 background-color:#cafa00;
}
.strip #div07 {
 background-color:#fffb00;
}
.strip #div08 {
 background-color:#ffc700;
}
.strip #div09 {
 background-color:#ff9300;
}
.strip #div10 {
 background-color:#ff5100;
}
.strip #div11 {
 background-color:#ff2600;
}
.strip #div12 {
 background-color:#d82253;
}
  </style>
 </head>
 <body >
 <div id="container">
  <div class="strip">
  <div id="div01"><br/>&darr;&nbsp;&nbsp;&nbsp;&nbsp;&uarr;</div>
  <div id="div02"><br/>&darr;&nbsp;&nbsp;&nbsp;&nbsp;&uarr;</div>
  <div id="div03"><br/>&darr;&nbsp;&nbsp;&nbsp;&nbsp;&uarr;</div>
  <div id="div04"><br/>&darr;&nbsp;&nbsp;&nbsp;&nbsp;&uarr;</div>
  <div id="div05"><br/>&darr;&nbsp;&nbsp;&nbsp;&nbsp;&uarr;</div>
  <div id="div06"><br/>&darr;&nbsp;&nbsp;&nbsp;&nbsp;&uarr;</div>
  <div id="div07"><br/>&darr;&nbsp;&nbsp;&nbsp;&nbsp;&uarr;</div>
  <div id="div08"><br/>&darr;&nbsp;&nbsp;&nbsp;&nbsp;&uarr;</div>
  <div id="div09"><br/>&darr;&nbsp;&nbsp;&nbsp;&nbsp;&uarr;</div>
  <div id="div10"><br/>&darr;&nbsp;&nbsp;&nbsp;&nbsp;&uarr;</div>
  <div id="div11"><br/>&darr;&nbsp;&nbsp;&nbsp;&nbsp;&uarr;</div>
  <div id="div12"><br/>&darr;&nbsp;&nbsp;&nbsp;&nbsp;&uarr;</div>
   </div>
  </div>
 </div>
 
<script>
$('document').ready(function() {
    $(document).scroll(function(){
      if (document.documentElement.clientHeight + $(window).scrollTop() >= $(document).height()) {
        $(document).scrollTop(0);
      }
    });
  });
</script>
 </body>
</html>
  • You can do the symmetry layout with all the elements once repeat given a symlink so that you don't have to provide 2 references to single instance. Secondly omit the footer for clarity sake. – Sachin Kanungo Sep 13 '15 at 13:18
  • @Ankit, I don't even know where to start looking, but I provided a first try. No js yet tho. @ Sachin Kanungo, thanks for your input, but can you provide more intel on how this "symmetry layout+symlink" can be done? – beati.pauperes.spiritu Sep 13 '15 at 18:39
  • Look at clankill3r's answer to this question: http://stackoverflow.com/questions/16993693/continuous-looping-page-not-infinite-scroll?rq=1 – m69's been on strike for years Sep 13 '15 at 19:17
  • Thanks, got bottom to top working. I tried to add : else if ($(window).scrollTop() <= 0) { $(document).scrollTop($(document).height()) } at the script but then it just glitches. – beati.pauperes.spiritu Sep 15 '15 at 19:27

1 Answers1

0

I did something like that once, but only for the case of list of items - not an arbitrary html.

Basic idea is a virtual list - you have limited number of items on the screen - so called sliding window. While scrolling additional items get pumped up and out of view items get deleted.

In such case infinite scroll is trivial - when you scroll past last item of record set you start loading items at index 0.

For arbitrary markup / styling I don't think it is even possible in 100%. All that absolute positioned elements, floats, etc....

c-smile
  • 26,734
  • 7
  • 59
  • 86