Jump to content
Search Community

How to make horizontal stacking divs with using Smooth Scrollbar plugin

caxez test
Moderator Tag

Recommended Posts

I have the following code

<div class="scrollbar">
   <main class="main-container">
      <section class="section">1</section>
      <section class="section">2</section>
      <section class="section">3</section>
      <section class="section">4</section>

<script src="https://unpkg.com/smooth-scrollbar@latest/dist/smooth-scrollbar.js"></script>
.main-container {
   display: flex;
   position: relative;
   height: 100vh;

.section {
   background-color: #eae8e5;
   height: 100%;
   min-width: 100vw;
class HorizontalScrollPlugin extends Scrollbar.ScrollbarPlugin {
   static pluginName = 'horizontalScroll';

   transformDelta(delta, fromEvent) {
      if (!/wheel/.test(fromEvent.type)) {
         return delta;

      const { x, y } = delta;

      return {
         y: 0,
         x: Math.abs(x) > Math.abs(y) ? x : y,


const scrollbar = Scrollbar.init(document.querySelector('.scrollbar'), {
   damping: 0.1,
   delegateTo: document,
   alwaysShowTracks: true,


I want it to be fixed on scroll when a block reaches a corner without preventing other blocks from scrolling as in this example https://codepen.io/akapowl/pen/abmpGQv/d076a9cf4c1a952a0bc921a76bc2202f
Thanks in advance everyone

See the Pen d076a9cf4c1a952a0bc921a76bc2202f by akapowl (@akapowl) on CodePen

Link to comment
Share on other sites

It's pretty tough to troubleshoot without a minimal demo - the demos you provided look like they were done by @akapowl and don't match the code you pasted in above. 


Also, if you want to use a 3rd party scroll library like that, you'll probably need to wire it up to ScrollTrigger.scrollerProxy(). Here's a quick demo from the docs: 

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


Keep in mind that we can't really support 3rd party tools like that. We're happy to answer any GSAP-specific questions though. 


If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.


Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites


Since you are going to be acting in an actual horizontal scrolling scenario unlike that demo of mine which was purposed for fake-horizontal scrolling, you don't even need any of the fancy stuff from that demo of mine.


Just adjust the scrollerProxy, that Helper already mentioned, to also work with horizontal scrolling, by either exchanging all scrollTop values by scrollLeft or adding an extra part for scrollLeft alongside scrollTop, and then you can use ScrollTriggers pinning to achieve the result you are going for.


Just remember to also set horizontal: true on the ScrollTriggers you set up because you are working with actual horizontal scrolling - then you can e.g. use a start value like 'left left' and an end value depending on how exactly you want things to behave. If you want it to behave like that demo of mine you posted, you will probably want to set pinSpacing: false, too.


You'll find more information on all of those properties mentioned in the Scrolltrigger docs. Good luck!


  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...