Horizontal Scrolling

index.html

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
  <li>H</li>
  <li>I</li>
  <li>G</li>
  <li>K</li>
  <li>L</li>
</ul>

# EXAMPLE: https://www.shopbylocals.com/un-world-goals-shopbylocals/

scroll.css

@media only screen and (min-width: 993px) {
    body {
        overflow-y: hidden;
        overscroll-behavior-y: none;
        transition: all 0.3s ease-in;
    }
    
    /* Parent Element */
    
    ul {
    display: inline-flex;
    }
    
    /* Child element of Parent */
    
    ul li {
        width:100vw;
    }
}


# elementor 
@media only screen and (min-width: 993px) {
    body{
    overflow-y: hidden;
    overscroll-behavior-y: none;
    transition: all 0.3s ease-in;
    }
    selector .elementor.elementor-10520{
    display: inline-flex;
    }
    body .elementor.elementor-10520 .elementor-section{
        width:100vw;
    }
}

scroll.js

<script>

function replaceVerticalScrollByHorizontal( event ) {
if ( event.deltaY !== 0 ) {
window.scroll(window.scrollX + event.deltaY * 2, window.scrollY );
event.preventDefault();
}
}

const mediaQuery = window.matchMedia( '(min-width: 993px)' );

if ( mediaQuery.matches ) {
window.addEventListener( 'wheel', replaceVerticalScrollByHorizontal );
}

</script>