[Horizontal Scroll - Vertical Scroll within a section]

I've got horizontal scrolling working with snap. However some of my sections have a modal and a div within that modal will need to scroll vertically. However This is not working. I looked at the demos and couldn't find anything related to this. Also searched the forums

 

All help greatly appreciated.

 

 

See the Pen ZEXmqPp by createsean (@createsean) on CodePen

[Horizontal Scroll - keyboard nav is wrong]

@OSUblake That's brilliant, thank you.

[Horizontal Scroll - keyboard nav is wrong]

@OSUblake thank you for that. I've used that but am still not getting draggable working. Here's what I've got so far.

 

Any further advice or pointers greatly appreciated

 

Sean

 

See the Pen KKXGjOo by createsean (@createsean) on CodePen

[Horizontal Scroll - keyboard nav is wrong]

I've got a site I'm building where the entire page is horizontal scrolling and that is working correctly.

 

However my client has asked that it be possible to click/drag to left/right  and that keyboard navigation use the left/right arrow keys and not the up/down as it does now. Is this possible?

 

See the Pen GRMBPoQ by createsean (@createsean) on CodePen

[Horizontal Scroll - scroll snap not lining up with edge of the viewport?]

@cassie

 

Thank you so much. Hope you have a super year in 2022 - Happy New Year.

[Horizontal Scroll - scroll snap not lining up with edge of the viewport?]

@Cassie That makes sense - but I'm not sure how to insert the 0 and 1 into the array.

 

I tried this let snapValues = [0,1]; but that didn't do anything. I figure that's cause snapValues is being set further down, but I looked at that and don't know what to modify in order to add the 0 and 1.

 

Really appreciate all your help. Javascript is really my weakest skill and I'm lost here.

 

edit

 

experimented some more and setting let widths = [0, 1] seems to work

[Horizontal Scroll - scroll snap not lining up with edge of the viewport?]

@Cassie That's very helpful thank you. noticed that scrolling backwards you can't stay on the first section it auto scrolls to the 2nd one.

[Horizontal Scroll - scroll snap not lining up with edge of the viewport?]

I didn't understand that. Removed the snap line from my timeline and tried using CSS snap but that's also not working. Hmmm

 

 

See the Pen MWEQPzM?editors=1000 by createsean (@createsean) on CodePen

[Horizontal Scroll - scroll snap not lining up with edge of the viewport?]

Okay - so what do I do if I don't know how many sections there will be?

 

I set this up as an example, but client will be using a CMS where they can add as many sections as they want to the page.

[Horizontal Scroll - scroll snap not lining up with edge of the viewport?]

I'm a newbie to gsap - also rather weak at javascript.

 

I'm working on a new site with a section that horizontal scrolls - that is working however scroll snap does not align sections with the edge of the viewport as expected.

 

In the above codepen - I've also got a modal (powered by AlpineJs) that slides in from the left, but because the scroll snap isn't aligning with the edge of the browser it looks wrong. is it possible to have this align to the left edge of the browser if scroll snap doesn't work?

 

Not sure why the embedded codepen is not horizontal scrolling, but if you go to the codepen site it does horizontal scroll.

 

 

See the Pen bGoLBVL?editors=1010 by createsean (@createsean) on CodePen

[Set Horizontal Trigger only at 1100px or larger?]

@akapowl ,

Thank you. that helped a lot.

[Set Horizontal Trigger only at 1100px or larger?]

This is my first project using greensock and my javascript skills are rather weak.

 

I've implemented horizontal scroll found here and this is working great. However I dont' want horizontal scroll below 1100 pixels. What is the best way to do that?

 

current code:

 

    gsap.registerPlugin(ScrollTrigger)

    let container = document.getElementById("chapter-wrapper");

    gsap.to(container, {
      x: () => -(container.scrollWidth - document.documentElement.clientWidth) + "px",
      ease: "none",
      scrollTrigger: {
        trigger: container,
        invalidateOnRefresh: true,
        pin: true,
        scrub: 1,
        end: () => "+=" + container.offsetWidth
      }
    })