#Help me please fixing the scrolling issue

13 messages · Page 1 of 1 (latest)

sinful iceBOT
#

Hi @vivid canopy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

I'm sorry, but the knowledge sources provided do not contain information specific to recreating the scroll/stacking behavior you described from the Framer template, nor do they reference your GitHub repo or offer a direct solution for a fixed left side with a scrolling right side and section stacking in Nuxt.

However, based on the sources, here are some general tips that might help you troubleshoot scroll and stacking issues in Nuxt projects:

  • For scroll snapping and section stacking, ensure that the scroll container (often the <main> or a custom wrapper) has the correct CSS properties, such as scroll-snap-type and overflow-y: scroll. The snapping should be applied to the scrolling parent, not the body, for best results. Example:

    main {
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  height: 100vh;
  overflow-y: scroll;
}

.hero-snap-section {
  scroll-snap-align: start;
  height: 100vh;
}

    This approach is discussed in the context of Tailwind and Vue/Nuxt in the sources, but it may need to be adapted for your specific layout and stacking needs Scroll snapping not working with Tailwind CSS and Vue.js/Nuxt.js.

  • If you want one side fixed (e.g., the left) and the other scrolling, use CSS like:

    .container {
  display: flex;
}
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  flex: 0 0 300px; /* or your desired width */
}
.content {
  flex: 1;
  overflow-y: auto;
  height: 100vh;
}
#
  • For advanced scroll-triggered animations or stacking effects, you might consider using libraries like GSAP with ScrollTrigger, as referenced in the sources. These can help animate sections as they enter or leave the viewport, but the sources do not provide a full implementation for your use case Mixing Scrolltrigger with Lenis in a Nuxt project.

If you need more targeted help, please provide a minimal code example or clarify which part of the scroll/stacking behavior is not working as expected. The knowledge sources do not contain enough information to provide a step-by-step solution for your specific layout.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@vivid canopy Kapa.ai is still learning and improving, please let me know how I did by reacting below.

next siren
#

do you have a hosted link of your site

vivid canopy
#

no ij ust have my repo, im really stuck on this and cant solve it

next siren
#

I can make a basic recreation in a tailwind demo one min

vivid canopy
#

My friend i really appreciate if you clone my repo and maybe help with solving this by writing comments i do appreciate that will help me a lot

#

If you see my repo now, the right side scrolls while the left is fixed ( the desired behavior i wanted ) but if you scroll on the left side you can immediately see it goes to the third section. Plus if you look on the template on framer i really want the same thing regarding the stacking sections over each other and so on

vivid canopy
#

@next siren are you willing to help on this mate ?

#

anyone please ?

next siren