我正在与一位客户合作，他希望他们的部分界面具有某种定制的滚动方法。他们不希望通常的滚动条可见；他们希望台式机/笔记本电脑用户用鼠标滚轮/触摸板滚动，他们希望移动用户用手指滚动。他们还需要向上箭头和向下箭头的图形，以提供另一种滚动方法，并使用户可以清楚地看到滚动是可能的(因为实际的滚动条是隐藏的)。客户端设置了这种滚动方式。
我整理了一些代码，这些代码适用于我尝试过的所有设备/浏览器组合，除了 Android 的股票浏览器。我已经通过以下配置确认了这个问题:
- Android 4.1.2(模拟器)
- Android 4.2.2(实际设备)
- Android 4.2.2(模拟器)
- Android 4.3(模拟器)
这个问题在 Android 4.4.2(模拟器)上不存在。
为了简化这个问题，我不包括向上和向下箭头的图形和随附的逻辑。
这是代码(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>当您点击三个选项中的任何一个时，右侧会出现第二个选项列表。但是，除非您从 ul CSS 规则中删除 overflow-y:scroll;，否则它永远不会出现在 Android 的普通浏览器上，然后您就不能再滚动了。
通过在 .category CSS 规则中将 left: 150px; 替换为 left: 25px; 可以很好地说明问题。当我这样做时，这就是它在工作浏览器中的样子:
这就是它在 Android 的股票浏览器中的样子:
我应该注意的另一件事是它适用于 Android 版 Chrome。
有没有办法让我在 Android 的股票浏览器中进行这项工作？
最佳答案
我在使用 Gingerbread Android 浏览器时遇到了问题。它根本不能很好地处理溢出 CSS 属性。为了在此浏览器上启用滚动，我必须仅将溢出(“滚动”或“自动”)应用于 BODY 容器。
关于Android股票浏览器不尊重CSS溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21344015/