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.

[Hema Nath]

So just to give an update of what's going on and the new issue I'm facing.

In the above demo, when the anchor links are clicked, it is triggering the horizontal scroll bar instead of the vertical scroll bar. To avoid that, I have used <p> tags in the place of anchor tags because they don't have the ability which anchor links have. And I have added an onclick event to each of the <p> tags which is supposed to take you to the right place, but the problem is that the scroll isn't enough or it is not scrolling to the right place.

This is the minimal demo:

See the Pen vYqBXmw?editors=1010 by Hema-Nath-Reddy (@Hema-Nath-Reddy) on CodePen.

 

Please help me out.

[Rodrigo]

Hi,

 

Basically there is an issue in the math you were using to set the scroll distance you're passing to the ScrollTo Plugin.

 

This seems to work the way you intend:

See the Pen WNqeEap by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps.

Happy Tweening!

[Hema Nath]

Thank you so much. It works perfectly fine now.