Hi! All the options I’ve seen for horizontal scroll work on static pages but not on template pages where the number of elements change.
I only need to know how to calculate the height of a section based on the numbers of items inside a CMS to make it work, because I’m using the horizontal scroll on a template page for my projects, and each project has a different number of images.
This way, since each image will be 100w, 100h and 60px padding all along, the idea would be to increase the section heigh by 100h for every new item so it can work.
The other alternative I found used custom code to automatically calculate some values but it only works on projects with less than 7 images. This one:
I’m out of time, so any help would be valuable. Thanks!
hi! thanks for your reply. the solution video does work but only for projects with less than 7 images. I tried many things and it still wouldn’t work.
how would you write that calculation in code? I know nothing about JS. one of the links you sent provides the answer in the comments:
…the only thing you need to take care of in order to maintain a natural scroll speed (an horizontal speed that’s equal to the vertical speed) is the height of the parent element of the horizontal section. It has to match the width of the horizontal section… You’ll use JS to retrieve the number of CMS items displayed in the horizontal section, then use custom code with CSS calc to compute a height value for the parent section, using the result of the JS as a variable.
For example adding the margins values, plus the known width of an item plus its margin to the next item, times the number of items.
Like: width:Calc((1vw + 350px + 0.3vw)*{number of items})
having said so, each item inside this collection list is: 100vw, 100vh, 60px padding on all sides, and there is no margin.
You have to write function that capture these elements and section element, then provide calculation and apply returned value (number) to section height.
This is very short theoretic description that I can thing right now. But there is no need to reinvent the wheel as in video he shows that works even with 2 or 3 items.
I checked my website on safari and it worked. it still doesn’t work on chrome or brave but it does on chrome mobile. maybe it’s a bug with the browser. here’s a video to that: Screen Recording 2021-06-20...
what do you think is the problem? a bug with the browser or something that can be fixed in the code?
someone on reddit gave me this code to calculate the height of the section wrapper to use the method you showed above:
I’m not sure how you made the horizontal scrolling but I’m assuming it’s where the images span the whole area. So here’s the code for it:
// Grab the section using it's class or ID.
const section = document.querySelector('.horizontal-scroll');
// Grab the count of children.
const num = section.childElementCount;
// Calculate the section's height.
section.style.height = (num * 100) + "vh";
Place that at your footer code, note that your section must have a class of “horizontal-scroll” and that your images have to have 100vh as their height exactly.
Hi @gianfrancosuito I have checked also in Chrome and Firefox (didn’t worked). Anyway, you can’t call it a bug as each browser manage identical thing its own way. I was also surprised that Chrome doesn’t calculate width correct way. My guess will be that has something to do with flex as Safari works with flex differently than other browsers.
one thing can be that images have different width. did you tried create one CMS item where in img collection is one image eg. 10x? to see if this have any impact? Another option can be to wrap image in div element.
You can try your code but as I see it would not work as there is missing interaction while window scroll, scroll section on X axis by amount of item width based on current window width relative to parent height etc. Was it Webflow related reddit channel? Instead thinking about JS that will be way more comprehensive than you example try to contact the developer from video to get help. But I believe that it can be solved without JS.
Sorry Im not able help a bit more as I can’t save changes to see results.
btw : images are way to big approx. 2.5mb per image in library of 12 = 30mb download. It will kill your website even with lazyload.
EDIT: I have now check again the video and there is an cloneable version where you can see that he have in CMS item card wrapper where image is contained. So you can try to clone and work out from there. Anyway I have now realised that you requesting help from Webflow support. Unfortunatelly I’m not Weflow staff so I’m sorry to step to this request.
