Unified scrolling? Synchronized scrolling? Slaved scrolling?

Hello forum. I finally figured out how to do the masonry photo gallery using multiple single column RGs. Great…kinda…

It looks right, but it scrolls wrong. Right now I have 3 columns, and they all scroll independently, which is not the desired behavior. I tried–very briefly–to create a workflow or conditional that will bind the scroll positions, but I wasn’t coming up with anything.

I want all 3 columns to scroll in unison. And ideally I’d like to remove the scroll bars as well. Any insight is appreciated.

you can add css in your Settings > SEO/meta tags > script in the header to hide the scroll bars

/* Hide scrollbar for IE, Edge and Firefox */
#one, #two, #three {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
    #one, #two, #three::-webkit-scrollbar {
      display: none;
    }

You can use javascript to make all elements scroll together. just give each rg an id attribute like “one”, “two”, “three” and then on page load run this javascript using the toolbox plugin with the run javascript action:

var s1 = document.getElementById('one');
var s2 = document.getElementById('two');
var s3 = document.getElementById('three');

function oneScroll(e) {
    s2.scrollTop = s1.scrollTop;
    s3.scrollTop = s1.scrollTop;
}

 function twoScroll(e) {
    s1.scrollTop = s2.scrollTop;
    s3.scrollTop = s2.scrollTop;
}

 function threeScroll(e) {
    s2.scrollTop = s3.scrollTop;
    s1.scrollTop = s3.scrollTop;
}
s1.addEventListener('scroll', oneScroll, false);
s2.addEventListener('scroll', twoScroll, false);
s3.addEventListener('scroll', threeScroll, false);
2 Likes

Wow! Thanks William! I’m gonna try this tonight :call_me_hand:t3:

1 Like

Thanks again William! The Javascript worked for sure, but now when it scrolls it’s acting a little strange, like it’s sticking or something, and then springing loose and bouncing. Any idea how I might fix that?

Screen-Recording-2022-08-18-at-4.51

OK, definitely something going on with relative group heights. The 2nd and 3rd columns are stopping at the first columns bottom edge, but the 2nd and 3rd columns have images that extend beyond that edge.

I’m guessing it’s the result of the 2 longer groups trying to scroll a vertical distance that is shorter than the content being displayed?

Try editing all the functions like below so it won’t try to force the others to keep scrolling if it reached the end:

function oneScroll(e) {
    let max1 = s1.scrollHeight - s1.offsetHeight
    if(s1.scrollTop <= max1){
        let max2 = s2.scrollHeight - s2.offsetHeight
        if(s1.scrollTop <= max2){
            s2.scrollTop = s1.scrollTop;
        }
         let max3 = s3.scrollHeight - s3.offsetHeight
         if(s1.scrollTop <= max3){
             s3.scrollTop = s1.scrollTop;
         }
    }
}