-
Scoll bar issue
Currently, I have a div that contains multiple uls. The div has an overflow-x: hidden; while the uls. Have a max-height. The issue that I am running into is that if you click on one of the first link (EG the 1) It will change scroll over to the first selection list by Jquery.
The issue that if I mouseover the second list I cannot use the scroll wheel to move it. Please note, to get the jsfiddle working correctly with my error hit the run button once. It sometimes works and I am not sure why.
If anyone has an idea why this is happening that would be great. It is probably something simple I am overlooking.
https://jsfiddle.net/1fag00xy/
-
Might just be an artifact of the js fiddle environment. In any case, sometimes, if I remove focus from the tab (go to another tab, or program) and come back, click on the page, the mouse wheel then works as expected. All the time, so far, if I open the console, disable the overflow-x: hidden, re-enable it, close the console, then it scrolls properly. You might try adding the overflow-x: hidden using jQuery instead of the stylesheet. I'd also try it on a "real" page. One without all the overhead of a fiddle.
One other thing I notice is that if I click on the javascript panel's settings icon, that also seems to fix it - adding to suspicion it's just something about the fiddle environment. But this all may just mean it has to do with focus somehow.
-
Oh I am testing it on a real page also and the same issue arises.
-
OK, will have a closer look when time allows, probably soon. Still suspect some sort of focus issue(s). Have you tried messing around with focus?
-
No firm idea why (though it does follow from my initial suspicions), and I wouldn't recommend it without exhausting all other simpler, more direct approaches, but this appears to work:
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
*, html, body { padding: 0px; margin: 0 auto !important; }
.dwDropDown { width: calc(21 * 10px); border: 1px solid black; position: relative; }
.dwDropDown>.dwDDWrapper {
position: absolute; top: 100%; left: -1px;
border: 1px solid black; border-top: none;
width: 100%;
}
.dwDropDown .dwDDSearch {
padding: 2px;
background-color: orange;
}
.dwDropDown .dwDDSearch>input {
width: calc(100% - 4px);
border: 0px;
outline: none;
padding: 2px;
}
.dwDropDown .dwItems {
max-height: calc(10 * 18px);
overflow-y: auto;
vertical-align: top;
}
.dwDropDown .dwTabList {
white-space: nowrap;
overflow-x: hidden;
}
.dwDropDown .dwTabList>ul {
display: inline-block;
width: 100%;
}
</style>
</head>
<body>
<div id="test" class="dwDropDown"><span>Master</span><div class="dwDDWrapper"><div class="dwDDSearch"><input id="kludge" type="text" placeholder="Search"></div><div class="dwTabLocater">Menu</div><div class="dwTabList"><ul class="dwItems dwMenu"><li>1</li></ul><ul class="dwItems"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li></ul></div></div></div>
<script>
$(document).on({
click: function() {
var i = parseInt($(this).index()) + 1;
var w = $(this).width();
$(this).closest('.dwTabList').animate({'scrollLeft' : (w * i) + 'px'},200, function(){$('#kludge').focus().blur();});
}
},'.dwMenu');
$(document).on({
click: function() {
$(this).parent().children('.dwTabList').animate({'scrollLeft' : '0px'},200);
}
},'.dwTabLocater');
</script>
</body>
</html>
I actually refined this, and I think I know why it works. When you click on the ul, it or a parent gets focus, but then it's immediately hidden so cannot respond to the wheel. By shifting the focus to the input we free it (focus) up. I just added the blur because, logically it should be blurred at that point (having just clicked on the ul).
-
I'll take a look at this once I get home to see if that is the issue. Thanks
-
Yeah well I only did limited testing, and even if it bears out, it's hokey. But then focus is hokey in general. You aren't allowed to grant focus to just any element. And this shouldn't even be an issue to begin with if the browsers were acting as they probably should.
