CODEWITHSUNDEEP
csselementorhorizontal-scrolling
ann
ann

Reputation: 11

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.

Upvotes: 0

Views: 886

Answers (1)

Nicholas Panarelli
Nicholas Panarelli

Reputation: 160

After trying a lot of different things I went for the Premium Addons Pro plugin, that has the horizontal section scroll and let's you also use section links: Elementor horizontal scroll widget

If you don't find a solution with code you can try this solution.

Upvotes: 1

Related Questions