Position fixed in multiple scroll areas #502

Xavier4022 · 2022-10-19T23:50:11Z

Xavier4022
Oct 19, 2022

Pardon this stupid question. I'm not a developer and don't know any Javascript.

I'm trying to add some position fixed elements to multiple scrollable areas. Found a working solution here, but I have no clue how to add this to my javascript. It would be great, if anyone could give me some advice.

This is the code to get the elements fixed:

var fixedElem = document.getElementById('fixed');

var scrollbar = Scrollbar.init(
  document.getElementById('scroll'),
);
scrollbar.addListener(function(status) {
   var offset = status.offset;
  
  fixed.style.top = offset.y + 'px';
  fixed.style.left = offset.x + 'px';
});

And here is how my scrollbar settings look like:
(I grabbed this code from here)

var mainElem = document.getElementById("main-scrollbar");
var innerElem1 = document.getElementById("leftscroll");
var innerElem2 = document.getElementById("rightscroll");

Scrollbar.use(OverscrollPlugin);
    
const options = {
  damping: 0.05,
  renderByPixels: !('ontouchstart' in document),
};
const overscrollOptions = {
  enable: false,
  effect: navigator.userAgent.match(/Android/) ? 'glow' : 'bounce',
  damping: 0.05,
  maxOverscroll: navigator.userAgent.match(/Android/) ? 150 : 100,
  glowColor: mainElem.dataset.glowColor,
};

const scrollbar = [
  Scrollbar.init(mainElem, {
    ...options,
    delegateTo: document,
    plugins: {
      overscroll: { ...overscrollOptions },
    },
  }),
  Scrollbar.init(innerElem1, {
    ...options,
    plugins: {
      overscroll: { ...overscrollOptions },
    },
  }),
  Scrollbar.init(innerElem2, {
    ...options,
    plugins: {
      overscroll: { ...overscrollOptions },
    },
  }),
];

How can I join these two scripts?
Thank you!

sadeghbarati · 2022-10-20T10:36:24Z

sadeghbarati
Oct 20, 2022
Collaborator

3 SmoothScrollbar instances that you want to handle fixed elements inside each of it with addListener API?

⚠️ DO NOT use custom scrollbars unless you know what you are doing. Read more

for main-scrollbar you can wrap your scrollbar with any element so you can easily add your fixed element outside of scrollbar element without too much effort, but when you nest SmoothScrollbars you have to manage fixed elements with addListener API

<body>
    <section> <!-- wrap main-scrollbar  -->
     
        <div class="main-scrollbar-fixed"> <!-- fixed element -->
            Normal CSS fixed property
        </div>
        
        <main id="main-scrollbar" data-scrollbar>
        
            <div id="leftscroll" data-scrollbar>
                Nested leftscroll SmoothScrollbar

                <div class="leftscroll-fixed">...</div> <!-- fixed element -->
            </div>
            
            <div id="rightscroll" data-scrollbar>
                Nested rightscroll SmoothScrollbar
                
                <div class="rightscroll-fixed">...</div> <!-- fixed element -->
            </div>
            
        </main>
        
    </section>
</body>

.main-scrollbar-fixed, .leftscroll-fixed, .rightscroll-fixed {
    position: fixed;
}

/* more info in js section (below) */
#leftscroll {
    --leftscroll-position-top: 0px;
    --leftscroll-position-left: 0px;
}

.letscroll-fixed {
    top: var(--leftscroll-position-top);
    left: var(--leftscroll-position-left)
}

If you init scrollbar just like code you share you have to do like this:

var mainElem = document.getElementById("main-scrollbar");
var innerElem1 = document.getElementById("leftscroll");
var innerElem2 = document.getElementById("rightscroll");

var innerElemOneFixed = document.querySelector(".letscroll-fixed");

Scrollbar.use(OverscrollPlugin);
    
const options = {
  damping: 0.05,
  renderByPixels: !('ontouchstart' in document),
};
const overscrollOptions = {
  enable: false,
  effect: navigator.userAgent.match(/Android/) ? 'glow' : 'bounce',
  damping: 0.05,
  maxOverscroll: navigator.userAgent.match(/Android/) ? 150 : 100,
  glowColor: mainElem.dataset.glowColor,
};

const scrollbar = [
  Scrollbar.init(mainElem, {
    ...options,
    delegateTo: document,
    plugins: {
      overscroll: { ...overscrollOptions },
    },
  }),
  Scrollbar.init(innerElem1, {
    ...options,
    plugins: {
      overscroll: { ...overscrollOptions },
    },
  }),
  Scrollbar.init(innerElem2, {
    ...options,
    plugins: {
      overscroll: { ...overscrollOptions },
    },
  }),
]; 


// scrollbar[0] => main-scrollbar instance

scrollbar[1].addListener(function(status) { // => leftscroll instance
   var offset = status.offset;
  
  // fixed specific element
  innerElemOneFixed .style.top = offset.y + 'px';
  innerElemOneFixed .style.left = offset.x + 'px';
  
  // if you want fixed multiple element use CSS variable instead
  innerElem1.style.setProperty('--leftscroll-position-top', offset.y + 'px');
  innerElem1.style.setProperty('--leftscroll-position-left', offset.x + 'px');
});

1 reply

Xavier4022 Oct 20, 2022
Author

Thank you very much for this detailed explanation, sadeghbarati. It works perfectly now! 🙏

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Position fixed in multiple scroll areas #502

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Position fixed in multiple scroll areas #502

Xavier4022 Oct 19, 2022

Replies: 1 comment · 1 reply

sadeghbarati Oct 20, 2022 Collaborator

Xavier4022 Oct 20, 2022 Author

Xavier4022
Oct 19, 2022

Replies: 1 comment 1 reply

sadeghbarati
Oct 20, 2022
Collaborator

Xavier4022 Oct 20, 2022
Author