CODEWITHSUNDEEP
javascript
user10953084
user10953084

Reputation:

Infinite scrolling webpage

What I want to achieve is once the user scrolls to the bottom of the last div ("bottom") essentially the bottom of the webpage, they can keep scrolling down and the first div ("top") will appear from the bottom resetting the scrolling from the top Ideally this would work both ways essentially creating infinite scrolling up and down

Any suggestions on what this is called or other information would be much appreciated, thank you

<div class="top">
<img>
</div>

<div>
<img>
</div>

<div class="bottom">
<img>
</div>

Upvotes: 0

Views: 268

Answers (2)

Victor Luna
Victor Luna

Reputation: 1814

Not sure if there is a better way to do this, but I am thinking you can move the div once it passes the view port. Depending if you are scrolling up and down you pretty much can calculate where to move the divs. It is like a chain game, once you passed the element move it to the bottom or top. Or if it is already in the bottom, then move the last element to the top an so on. This is just an idea, so not sure if it will work with what you want to do.

Simple/rough example CodePen

HTML

<div id="body">
  <div id="top">
  </div>
  <div id="middle">
  </div>
  <div id="center">
  </div>
  <div id="bottom">
  </div>
</div>

CSS

body {
  width: 100%;
  margin: 0;
  padding: 0;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}

body::-webkit-scrollbar { 
  display: none;
}

#top {
  height: 1250px;
  background: blue;
}

#middle {
  height: 1250px;
  background: red;
}

#center {
  height: 1250px;
  background: pink;
}

#bottom {
  height: 1250px;
  background: green;
}

JS to check is user is scrolling up or down and to check if element is in the view port.

var divs = ['#top', '#middle', '#center', '#bottom'];

var current = '#top';
var next = '#center';

$('#body').on('DOMMouseScroll mousewheel', function (e) {
  if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0 ) {
    // Scrolling down
    if(!inScreen(current) && inScreen(next)) {
      $('#body').append($(current));
      current = divs[getNextIndex(current)];
      next = divs[getNextIndex(next)];
    }
  } else { // Scrolling up
    if(!inScreen(divs[getNextIndex(current)]) && inScreen(current)) {
      $('#body').prepend($(divs[getPrevIndex(current)]));
      current = divs[getPrevIndex(current)];
    }
  }
});

// Function to check if element is in view port
var inScreen = function (elem) {
  let elem_top = $(elem).offset().top;
  let elem_bottom = elem_top + $(elem).outerHeight();
  let window_top = $(window).scrollTop();
  let window_bottom = window_top + $(window).height();

  return elem_bottom > window_top && elem_top < window_bottom;
};

// Function to get next index if last index then get the first one
var getNextIndex = function (item) {
  let idx = divs.findIndex(divs => divs === item);

  if((divs.length - 1) == idx) {
    idx = 0;
  } else {
    idx++;
  }

  return idx;
}

// Function to get previous index if first index then get the last one
var getPrevIndex = function (item) {
  let idx = divs.findIndex(divs => divs === item);

  if(0 == idx) {
    idx = divs.length - 1;
  } else {
    idx--;
  }
  return idx;
}

Upvotes: 3

Vinicius Carvalho
Vinicius Carvalho

Reputation: 58

If I understood correctly, as the user gets to the bottom div (end of the page), you don't want the page to rollback to top, right? You want the top div to be rendered again right after the bottom div, correct?

You can use the onscroll event on window to check if the user hits the bottom and dinamically render the top div again.

Hope that helps.

Upvotes: 0

Related Questions