Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 20, 2020 at 10:32 am #1186276
    Guenni007

    for example if you go to your demo: https://kriesi.at/themes/enfold-2017/
    and hover the pages that mega menu is opened – you can still scroll the “page” content.
    is it possible to have no scrolling on mega-div is open?

    February 25, 2020 at 5:09 am #1187557
    Ismael

    Hey Guenter,

    Thank you for the inquiry.

    This should be possible. Try to listen for the scroll event and check if one of the avia_mega_div containers display property is set to block. If it is set to block, then prevent the scroll.

    UPDATE: According to some threads, you can’t use preventDefault to stop the scroll events or action, so I’ve searched for alternatives to stop scrolling. and found the following threads.

    // https://davidwalsh.name/prevent-body-scrolling
    // https://stackoverflow.com/questions/3656592/how-to-programmatically-disable-page-scrolling-with-jquery

    Again, you can check for the avia_mega_div container’s display property, then execute the script that will prevent the scrolling.

    Best regards,
    Ismael

    February 26, 2020 at 7:49 pm #1188212
    Guenni007

    Thanks: thats a good hint : i tried to realise it with addClass / removeClass – but only the direct way on inline css works :
    On mega-div open there is a class on that parent li that toggles – i use that for trigger : menu-item-mega-parent

    function no_scroll_on_mega_div_open(){
?>
<script type="text/javascript">
(function($) {
	function a() {
		var mega = $('.menu-item-mega-parent');
		mega.on({
			mouseover: function() {
				$('html, body').css({'overflow': 'hidden','height': '100%'});
			},
			mouseleave: function() {
				$('html, body').css({ 
				'overflow-x': 'hidden', 
				'overflow-y': 'scroll', 
  				'height': 'auto',
  			   });
			}
		});
	}
	a();
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'no_scroll_on_mega_div_open');

    Can be closed

    February 26, 2020 at 9:21 pm #1188268
    Guenni007

    By the way – this results in a way if you hover the mega-div the body jumps to top.
    get rid of the height css – then it only stopps the scrolling without jumping to top.

    PPS: you can use ul.sub-menu as trigger aswell for all drop-dropdown menus. but then the first-level parent li has no effect – there is no toggling class on it like on mega-div open.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.