Horizontal Scrolling Section

Before You Start

1. Inside the section you need to create as minimum 2 rows with content inside. In rows settings, enable "Full Width" and "Fullscreen" options.

Adding Class Suffix

2. Add class suffix horizontal-section to the parent section.

Adding CSS

3. Copy CSS code below, go to Tools ➝ Code Editor ➝ CSS and paste it.

@media (min-width: 1281px) {
    .com_gridbox:not(.gridbox) .horizontal-section {
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    .com_gridbox:not(.gridbox) .horizontal-section .ba-section-items {
        display: flex;
        position: sticky;
        top: 0;
        width: fit-content;
        z-index: 1;
    }
    
    .com_gridbox:not(.gridbox) .horizontal-section > .ba-section-items >.ba-row-wrapper {
        width: calc(100vw - 15px);
    }
}
    
@media (max-width: 1280px) {
    .com_gridbox:not(.gridbox) .horizontal-section{
        height: auto !important; 
    }
    .com_gridbox:not(.gridbox) .horizontal-section .ba-section-items  {
        transform: none!important;
    }
}

Adding JavaScript

4. Copy JavaScript code below, go to Tools ➝ Code Editor ➝ JavaScript and paste it.

document.addEventListener('DOMContentLoaded', () => {
  const sections = document.querySelectorAll('.horizontal-section');
  sections.forEach(section => {
    const scroller = section.querySelector('.ba-section-items');
    if (!scroller) return;
    const updateHeight = () => {
      const scrollWidth = scroller.scrollWidth - window.innerWidth;
      section.style.height = (scrollWidth + window.innerHeight) + 'px';
    };
    const onScroll = () => {
      const rect = section.getBoundingClientRect();
      const scrollWidth = scroller.scrollWidth - window.innerWidth;
      const offset = Math.min(Math.max(-rect.top, 0), scrollWidth);
      scroller.style.transform = `translateX(${-offset}px)`;
    };
    updateHeight();
    onScroll();
    window.addEventListener('resize', updateHeight);
    window.addEventListener('scroll', onScroll);
  });
});