Disparities in width using smooth scroll

[Tee 3 Likes (Newbie)]

I'm currently working on a project I want to use smooth scroll for. To do so I decided to use @OSUblake's codepen. 

 

Since I want a horizontal scroll, I changed the direction from:

TweenLite.set(this.scroller.target, {
    y: -this.scroller.y
});

to:

TweenLite.set(this.scroller.target, {
    x: -this.scroller.x
});

 

..and set the body's height according to the scroll-container's width, not height. - It kind of works, but it seems, that this.scroller.x (originally this.scroller.y) and the container's width don't match, since it "overscrolls". How so and is there a way to implement it correctly? 

 

I created a link to additionally visualize the issue:

https://vibeitin.firebaseapp.com/

 

 

See the Pen QWbvggK by magiix (@magiix) on CodePen

[ZachSaucier 7,129 Likes (Superhero)]

Hey Tee.

 

You need to correct the height value of the page based on the width and viewport dimensions:

if (resized) {   
  var width = scroller.target.scrollWidth;
  body.style.height = (width + innerHeight - innerWidth) + "px";
  scroller.resizeRequest = 0;
}

See the Pen ExjmvYG?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Happy tweening!