I'm working with a client who would like part of their interface to have a somewhat customized method of scrolling. They don't want the usual scrollbars to be visible; they want desktop / laptop users to scroll with their mouse wheel / touchpad and they want mobile users to scroll with their finger. They also want graphics of an up arrow and a down arrow to provide an alternate method of scrolling and also to make it obvious to the user that scrolling is possible (since the actual scrollbars are hidden). The client is set on this method of scrolling.
I put together some code that works on all device / browser combinations that I've tried it on except for Android's stock browser. I have confirmed this issue with the following configurations:
- Android 4.1.2 (emulator)
- Android 4.2.2 (actual device)
- Android 4.2.2 (emulator)
- Android 4.3 (emulator)
This issue is not present on Android 4.4.2 (emulator), though.
In order to keep things simple for this question, I'm not including the graphics of the up and down arrows and the accompanying logic.
Here's the code (jsFiddle demo):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
#side_nav, .category {
position: absolute;
}
#side_nav {
-webkit-user-select: none;
}
.category {
display: none; /* Will be shown when user clicks on an option */
top: 0;
left: 150px;
}
.ul_wrapper, .ul_wrapper ul {
width: 125px;
height: 242px;
}
.ul_wrapper {
background: #ccc;
border: 3px solid #000;
border-radius: 6px;
text-align: center;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
list-style: none;
overflow-y: scroll;
}
li {
padding-top: 10px;
}
li:last-child {
padding-bottom: 10px;
}
span {
display: inline-block;
width: 100px;
height: 100px;
border: 3px solid #999;
border-radius: 6px;
cursor: pointer;
}
#chosen_option {
float: left;
margin-left: 150px;
}
</style>
</head>
<body>
<div id="side_nav">
<div class="ul_wrapper">
<ul>
<li>
<span>Option 1</span>
<div class="category">
<div class="ul_wrapper">
<ul>
<li><span>Option 1a</span></li>
<li><span>Option 1b</span></li>
<li><span>Option 1c</span></li>
</ul>
</div>
</div>
</li>
<li>
<span>Option 2</span>
<div class="category">
<div class="ul_wrapper">
<ul>
<li><span>Option 2a</span></li>
<li><span>Option 2b</span></li>
</ul>
</div>
</div>
</li>
<li>
<span>Option 3</span>
<div class="category">
<div class="ul_wrapper">
<ul>
<li><span>Option 3a</span></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<div id="chosen_option"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function get_scrollbar_width() {
var div, body, W = window.browserScrollbarWidth;
if (W === undefined) {
body = document.body, div = document.createElement('div');
div.innerHTML = '<div style="width: 50px; height: 50px; position: absolute; left: -100px; top: -100px; overflow: auto;"><div style="width: 1px; height: 100px;"></div></div>';
div = div.firstChild;
body.appendChild(div);
W = window.browserScrollbarWidth = div.offsetWidth - div.clientWidth;
body.removeChild(div);
}
return W;
}
var scrollbar_width = get_scrollbar_width();
$('#side_nav ul').css({
'padding-right': scrollbar_width,
'margin-left': scrollbar_width / 2
});
$('span').on('click', function(event) {
event.stopPropagation(); // Prevent $('html').click(); from triggering
var parent_li = $(this).parent();
var child_category = parent_li.children('.category');
if (child_category.length) {
var show_div = false;
if (child_category.is(':hidden')) {
show_div = true;
}
parent_li.siblings().find('.category:visible').fadeOut();
if (show_div) {
child_category.fadeIn();
}
else {
parent_li.find('.category:visible').fadeOut();
}
}
else {
$('#chosen_option').html('You chose ' + $(this).html().toLowerCase());
$('.category:visible').fadeOut();
}
});
$('html').click(function() {
$('.category:visible').fadeOut();
});
</script>
</body>
</html>When you tap on any of the three options, a second list of options should appear to the right. However, it never appears on Android's stock browser unless you remove overflow-y: scroll; from the ul CSS rules, but then you can no longer scroll.
The problem is best illustrated by replacing left: 150px; with left: 25px; in the .category CSS rules. When I do that, this is what it looks like in a working browser:
And this is what it looks like in Android's stock browser:
One other thing I should note is that it works in Chrome for Android.
Is there a way that I can make this work in Android's stock browser?
