Jump to content

Endless scroll for homepage

Recommended Posts

Hi!

I'm trying to make my homepage scroll endlessly, cycling through the content. Meaning when the user gets to the end of the page content (the bottom) the content from the beginning fills in and essentially the page never stops filling with content...if that makes sense. If not, here is a great example of what I'm talking about: https://ryanstrzok.com/

This is my site: hkportfolio.com

Again, I only want this on my homepage no other pages on the site. Any help is greatly appreciated!

Edited by hilary
Added tags
Link to comment

@hilary Yea this is a cool setup. It looks like they have the first section on the site duplicated at the bottom. Then when the user gets there and scrolls that into view it moves them back up to the top and slips the original top section into place. Lots of javascript to do this, i dont think there's a simple free solution out there.

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

Link to comment

Thanks for getting back to me! Bummer...yeah I asked "that-AI-tool-that-shall-not-be-named" and it gave me the following JS, it didn't seem too bad, but you'd have to have access to the Squarespace stylesheet to make it work and I can't figure out how to export that either. Oh well, nice idea!

<style>
body, html {
  height: 100%;
  margin: 0;
  overflow: hidden; /* Prevents scrollbars */
}

.content, .duplicate-content {
  position: absolute; /* Absolute positioning to stack them */
  width: 100%;
}

.content {
  top: 0;
}

.duplicate-content {
  top: 100%; /* Starts below the original content */
}
</style>

<script>
let content = document.querySelector('.content');
let duplicateContent = document.querySelector('.duplicate-content');

function appendDuplicateContent() {
  // Clone the original content
  let clonedContent = content.cloneNode(true);
  // Append the cloned content to the duplicate content container
  duplicateContent.appendChild(clonedContent);
}

// Initially append a duplicate of the content
appendDuplicateContent();

window.addEventListener('scroll', function() {
  const contentHeight = content.offsetHeight;
  const scrollPosition = window.innerHeight + window.scrollY;

  if (scrollPosition >= contentHeight) {
    // When scrolled to the end, append another duplicate
    appendDuplicateContent();
  }
});
</script>

 

Link to comment

Hmm yea, im not sure this is exactly going to do it. This looks like it'll just keep trying to duplicate content as you scroll. This other site moves you back to the top after you see the duplicated top section it just replaces it with the original one and moves you up to start at 0 again so you're not constantly duplicating, you just need one extra copy of your top section to do it like your example.

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.