Я работаю с клиентом, который хотел бы, чтобы часть их интерфейса имела несколько настраиваемый метод прокрутки. Они не хотят, чтобы обычные полосы прокрутки были видны; они хотят, чтобы пользователи настольных компьютеров/ноутбуков прокручивали колесиком мыши/тачпадом, а мобильные пользователи прокручивали пальцем. Они также хотят, чтобы изображения стрелок вверх и стрелок вниз предоставляли альтернативный метод прокрутки, а также делали очевидным для пользователя, что прокрутка возможна (поскольку фактические полосы прокрутки скрыты). Клиент настроен на этот метод прокрутки.
Я собрал некоторый код, который работает на всех комбинациях устройств и браузеров, на которых я его пробовал, за исключением стандартного браузера Android. Я подтвердил эту проблему со следующими конфигурациями:
- Android 4.1.2 (эмулятор)
- Android 4.2.2 (фактическое устройство)
- Андроид 4.2.2 (эмулятор)
- Андроид 4.3 (эмулятор)
Однако этой проблемы нет в Android 4.4.2 (эмулятор).
Чтобы не усложнять этот вопрос, я не включаю графику стрелок вверх и вниз и сопутствующую логику.
Вот код (демонстрация jsFiddle):
<!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>Когда вы нажимаете на любой из трех вариантов, справа должен появиться второй список параметров. Однако он никогда не появляется в стандартном браузере Android, если вы не удалите overflow-y: scroll; из правил CSS ul, но тогда вы больше не сможете прокручивать.
Проблема лучше всего проиллюстрирована заменой left: 150px; на left: 25px; в .category правилах CSS. Когда я это делаю, вот как это выглядит в работающем браузере:
А вот как это выглядит в стандартном браузере Android:
Еще одна вещь, которую я должен отметить, это то, что она работает в Chrome для Android.
Есть ли способ заставить это работать в стандартном браузере Android?
z-index:10;к.category, чтобы продвинуть его вперед. - person reese schedule 29.01.2014