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).
Scoll bar issue
Reply With Quote
Bookmarks