Anchor links and overflow

[Hema Nath]

This is a minimal demo of how the website I am creating might look like, there is more content in each container, but for the sake of minimalism, I have removed all of it. The main issue is that:
1. The anchor links are not working.
2. If I use touchpad and scroll left and right(horizontally) and then scroll top to bottom(horizontally), the gsap is getting triggered from where I left off and then its scrolling even when there is no content to the right.
3. It is pushing my last container to the top after I scroll there.

See the Pen pommoBa by Hema-Nath-Reddy (@Hema-Nath-Reddy) on CodePen

[Cassie]

Hi there!

 

Your container housing your panels has overflow:scroll on the x axis, so you can scroll vertically and also horizontally. That's causing the 'swipe' issue.

 

Here's a demo showing the correct setup for anchor links and fake horizontal scrolling.

See the Pen bGexQpq by GreenSock (@GreenSock) on CodePen

 

Hope it helps!

[Hema Nath]

Hi

I have taken the code, modified it according to my website. Now the anchor links and the horizontal scrolling are working, but once a click on a link, I am unable to scroll to the containers before it and on top of that, it is allowing me to scroll past the last container.

This is the new gsap for your reference:
 

document.addEventListener("DOMContentLoaded", (event) => {
  gsap.registerPlugin(
    ScrollTrigger,
    ScrollToPlugin,
    RoughEase,
    ExpoScaleEase,
    SlowMo,
    CustomEase
  );

  let panelsContainer = document.querySelector(".container"),
    tween;

  document.querySelectorAll(".anchor").forEach((anchor) => {
    anchor.addEventListener("click", function (e) {
      e.preventDefault();
      let targetElem = document.querySelector(e.target.getAttribute("href")),
        y = targetElem.offsetTop;

      if (targetElem && panelsContainer.contains(targetElem)) {
        let totalScroll = tween.scrollTrigger.end - tween.scrollTrigger.start,
          totalMovement =
            (panelsContainer.children.length - 1) * targetElem.offsetWidth;
        y = Math.round(
          tween.scrollTrigger.start +
            (targetElem.offsetLeft / totalMovement) * totalScroll
        );
      }

      gsap.to(window, {
        scrollTo: {
          y: y,
          autoKill: false,
        },
        duration: 1,
      });
    });
  });

  let sections = gsap.utils.toArray(".bodyb > .container");

  ScrollTrigger.defaults({
    markers: false,
  });

  tween = gsap.to(sections, {
    xPercent: -100 * (sections.length - 1),
    ease: "none",
    scrollTrigger: {
      trigger: ".bodyb",
      pin: true,
      scrub: 1,
      snap: 0,
      end: () => "+=" + document.querySelector(".bodyb").offsetWidth,
    },
  });
});

 

[Cassie]

Please can we see a minimal demo showing the issue?

Just click fork on the demo I linked to (bottom right) and then add your code and post it here. It makes things a lot easier for us to help you.

 

Thanks!

[Hema Nath]

See the Pen BaeeRVE by Hema-Nath-Reddy (@Hema-Nath-Reddy) on CodePen

 

 

Having observed the way it works, I think clicking on an anchor link is moving the horizontal scroller instead of the vertical scroller unlike how it is working in the minimal demo you provided before. 

[Hema Nath]

12 minutes ago, Hema Nath said:

Here is the demo: 
Minimal demo.
 

 

Having observed the way it works, I think clicking on an anchor link is moving the horizontal scroller instead of the vertical scroller unlike how it is working in the minimal demo you provided before. 

 

I mistakenly placed another link and tried editing it, for some reason, the link is not working. So I am quoting the reply and pasting the minimal demo link here.

See the Pen BaeeRVE by Hema-Nath-Reddy (@Hema-Nath-Reddy) on CodePen