Jump to content

Is there a way to verticle scroll the mobile dropdown menu if it's larger than the screen?


imgrooot
Go to solution Solved by imgrooot,

Recommended Posts

Right now I have a mobile dropdown that works fine.  The only issue I have is that when viewing it on my smartphone, the dropdown gets cut off at the bottom and I am unable to scroll it down to rest of it.  Is there a way to fix it so that It's scrollable?

 

Here's my js code of the dropdown.

$(document).ready(function() {
	$(".nav-mobile li a").each(function() {
		if ($(this).next().length > 0) {
			$(this).addClass("parent-arrow");
		}
	})

	$(".toggle-mobile-menu").click(function(e) {
		e.preventDefault();
		$(this).toggleClass("active-mobile");
		$(".nav-mobile").toggle();
	});

	adjustMenu();
});

$(window).bind('resize orientationchange', function() {
	ww = document.body.clientWidth;
	adjustMenu();
});

var adjustMenu = function() {
	var ww = document.body.clientWidth;
	if (ww <= 850) {
		$(".toggle-mobile-menu").css("display", "block");
		if (!$(".toggle-mobile-menu").hasClass("active-mobile")) {
			$(".nav-mobile").hide();
		} else {
			$(".nav-mobile").show();
		}
		$(".nav-mobile li").unbind('mouseenter mouseleave');
		$(".nav-mobile li a.parent-arrow").unbind('click').bind('click', function(e) {
			// must be attached to anchor element to prevent bubbling
			e.preventDefault();
			$(this).parent("li").toggleClass("hover");
		});
	}
	else if (ww > 850) {
		$(".toggle-mobile-menu").css("display", "none");
		$(".nav-mobile").hide();
		$(".nav-mobile li").removeClass("hover");
		$(".nav-mobile li a").unbind('click');
		$(".nav-mobile li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
		 	// must be attached to li so that mouseleave is not triggered when hover over submenu
		 	$(this).toggleClass('hover');
		});
	}
}
Link to comment
Share on other sites

Care to provide a link to the a working application.  Otherwise, we can only take shots in the dark.  At least provide a screenshot and/or CSS, because this is probably more of a CSS problem than a JS problem.

 

I have it working now. And yes it is a CSS problem. Here's the css code. Note that "Overflow-y" will only work if the position is defined.  Without the "position:fixed", my nav-mobile dropdown didn't open when I clicked toggle.

.nav-mobile {
  display: none;
  *zoom: 1;
  position: fixed;
  width: 100%;

  overflow-y: scroll;
  -ms-overflow-y: scroll;
  -webkit-overflow-scrolling: touch; // mobile safari
}
Link to comment
Share on other sites

  • Solution

 

I have it working now. And yes it is a CSS problem. Here's the css code. Note that "Overflow-y" will only work if the position is defined.  Without the "position:fixed", my nav-mobile dropdown didn't open when I clicked toggle.

.nav-mobile {
  display: none;
  *zoom: 1;
  position: fixed;
  width: 100%;

  overflow-y: scroll;
  -ms-overflow-y: scroll;
  -webkit-overflow-scrolling: touch; // mobile safari
}

 

One small edit. Add the height: 100%. It'll fix any y scrolling issue.  Here's the updated code.

.nav-mobile {
  display: none;
  height: 100%;
  *zoom: 1;
  position: fixed;
  width: 100%;

  overflow-y: scroll;
  -ms-overflow-y: scroll;
  -webkit-overflow-scrolling: touch; // mobile safari
}
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.