Target individual scroll and allow swipe scroll of menu (particularly mobile devices)

HTML & CSS
1

I have a menu that falls into a stacked slide in menu below 580px. The problem is that on mobiles if I try and scroll, I must scroll from the right of the menu elemetns. If I touch menu li elements and swipe nothing happens. So I need to be able to scroll the menu from a swipe up and down of the menu, but also I want this scroll to only affect the mobile menu and not the body scroll.

Below 580px the below gets added to a #nav.

.applyscroll{
overflow-y: scroll !important;	
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
}

below is start of #nav

<div id ="grid-nav" class="gridContainer clearfix">
      <div id ="nav-container">
          <div id="nav">
          <div id="mobile-user-panel-c">
           <div id="user-img-c"><span id="user-img"><img src="../media/images/header/icon-anon.png" alt=""/></span></div>
           <div id="mobile-user-c"><span id ="mobile-user">Hi Guest!</span>
           </div>
        </div>
            <ul>

Help here mucho appreciated

2

Is the issue that the element won’t scroll on mobile and the body scrolls instead?

On ios this simple menu slides up and down fine when swiped.

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	padding:0
}
ul {
	margin:0;
	padding:0;
	list-style:none;
	height:300px;
	overflow-y: scroll !important;
	overflow-x: hidden !important;
	-webkit-overflow-scrolling: touch !important;
}
a {
	display:block;
	padding:8px 10px;
	text-decoration:none;
	color:#fff;
	background:blue;
	border-top:1px solid #fff;
}
a:hover {
	background:teal
}
</style>
</head>

<body>
<ul>
		<li><a href="#">test menu item</a></li>
		<li><a href="#">test menu item</a></li>
		<li><a href="#">test menu item</a></li>
		<li><a href="#">test menu item</a></li>
		<li><a href="#">test menu item</a></li>
		<li><a href="#">test menu item</a></li>
		<li><a href="#">test menu item</a></li>
		<li><a href="#">test menu item</a></li>
		<li><a href="#">test menu item</a></li>
		<li><a href="#">test menu item</a></li>
		<li><a href="#">test menu item</a></li>
		<li><a href="#">test menu item</a></li>
		<li><a href="#">test menu item</a></li>
</ul>
<p>test</p>
</body>
</html>

Do you have a demo so we can try out and see what’s happening? Or is this a problem on a specific device (I only have iphone and mac simulator to test)?

3

Hi Pullo…

Issue is that the scroll touch does nothing when finger us swiped against menu elements… There’s about a 20px margin to right of slidein menu and if the swipe is done there, it’s ok. It’ll scroll the menu to a certain point and then the body will scroll.

I need to stop body scrolling at all when slidein menu scroll is swiped and to make slidein scroll work if swipe is over elements.

Gotta get back to work now, but I’ll try get a demo up asap

Thanks

4

Notice you put the scroll on the ul elements… I’ll try that first

5

nha no luck…
will get back to you with a link, as at the mo we’re pissing around with my.cnf and php.ini for db timeouts… the files are on that server.

6

Thanks, that will make it easier for us to debug and to see what’s going on :slight_smile:

7

Top secret :confused: Will have to pass you in and explain problem/solution here after.

Trying to deal with nginx/my.cnf/php.ini timeout on large db upload a mo.

8

info and pass sent pullo. Like said, for the benefit of others with similar problems, i’ll later explain here

9

info and pass sent Paul. Like said, for the benefit of others with similar problems, i’ll later explain here

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.