Stop onclick when user scrolls using mobile device

Question

I am trying to create a top menu that contains dropdown menu items. This menu needs to be able to scroll horizontally as needed when the number if items exceeds the display width. The dropdown items are show/hidden through a CSS hover class. I also have some JS that repositions the dropdown position so that the dropdown menu follows the parent as the user scrolls.

The issue I am having is that on a mobile device the hover action happening when the user tries to scroll the menu to get to items off the page.

Does anyone have any tips/ideas/practices on how I can stop the hover from happening until the user stops scrolling and only show the dropdown menu when they actually press the menu?

I can post full html if anyone feels it helpful, however I felt like due to the complexity of the product I am trying to work with it might just confuse matters. the basic html structure is as follows though:

 <nav class="Nav_Top">
    <ul class="Nav_TopUL"> 
        <li class="Nav_LI">
        <div class="Nav_ItemWrapper">
            <a class="Nav_A" >
                <img class="Nav_Img">
                <span class="Nav_Span">Contacts</span>
            </a>
            <ul class="Nav_SubUL" style="left: 84.4px;">
                <div class="PopOutUpArrow" style="margin-left: 39.9167px;"></div>
                <li class="Nav_LI">
                    <div class="Nav_ItemWrapper">
                        <a class="Nav_A">
                            <span class="Nav_Span">link</span>
                        </a>
                    </div>
                </li>
            </ul>
        </div>
        </li> <!--LI structure repeated for each menu item -->
        <div class="FirstMenuGradient" style="display: none; height: 72.6833px;"></div>
        <div class="SecondMenuGradient" style="display: block; height: 72.6833px;"></div>
    </ul>
</nav>

Thank you for your help in advance everyone!

Egor Sanko · Answer 1 · 2020-09-08T21:02:10.490

I used this code in my personal JS apps:

 if (typeof window.orientation !== 'undefined'){
  console.log('Mobile');

This allowed me to execute different code blocks depending on if the user is on a mobile device or not (because only on the mobile browser this parameter will not be 'undefined'). In your case, I would then execute the code which doesn't have 'hover' parameters in it, as it is not necessary to have this parameter on mobile.

BUT!

I also encourage you to read these 2 articles as you may possibly find more suitable/clean solutions:

Finally, a CSS only solution to :hover on touchscreens

Changing :hover to touch/click for mobile devices

Stop onclick when user scrolls using mobile device

1 Answers1