Section links for Horizontal scrolling pages on Elementor for Wordpress

I'm trying to create a page that scrolls horizontally. I'm working with Elementor Pro on Wordpress and I have the following code:

On the page

.elementor-section-wrap{ 
    display: inline-flex;
 }

.elementor-section{ 
    width: 100vw;
 }

.header {width: 5vw; }

@media(min-width:770px){

body{
    overflow-y: hidden;
    overscroll-behavior-y: none;
    scroll-behavior: smooth;

}
 #margin {
    width: calc(100% - 118px)
}}



@media(max-width:770px){
    .elementor-section-wrap{
        display:block;
    }
}

I also added code to the site in the Custom Code feature for Elementor which reads:

<script type="text/javascript">
    function replaceVerticalScrollByHorizontal( event ) {
  if ( event.deltaY !== 0 ) {
   window.scroll(window.scrollX + event.deltaY * 2, window.scrollY );
   event.preventDefault();
  }
 }

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

 if ( mediaQuery.matches ) {
  window.addEventListener( 'wheel', replaceVerticalScrollByHorizontal );
 }
</script>

The website displays as expected, being able to scroll horizontally with the mouse wheel. However, links to sections are not automatically scrolling to the correct section.

The links work when you open them in a new window, but they won't scroll at all. Could you help me?

I tried to link to horizontal sections both by:

1. Adding a text box with a link to #section-CSSid
2. Creating a general menu (which is what I actually need) from WordPress pointing to #section-CSSid

Again, links do work when I open them in a new page, but the issue is with the automatic scrolling.