Android股票浏览器不尊重CSS溢出 [英] Android Stock Browser Not Respecting CSS Overflow
问题描述
我正在与一个客户端，他们希望部分他们的界面有一个有点自定义的滚动方法。他们不想看到通常的滚动条;他们希望桌面/笔记本电脑用户用鼠标滚轮/触摸板滚动，他们希望移动用户用他们的手指滚动。他们还想要一个向上箭头和向下箭头的图形，以提供一种替代的滚动方法，并且使用户明白滚动是可能的（因为实际的滚动条被隐藏）。
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.
我放在一起的代码，所有的设备/浏览器组合，我已经试过，除了Android的股票浏览器。我已通过以下配置确认此问题：
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（模拟器）
- Android 4.2.2（实际装置）
- Android 4.2.2（模拟器）
- Android 4.3（模拟器）
- Android 4.1.2 (emulator)
- Android 4.2.2 (actual device)
- Android 4.2.2 (emulator)
- Android 4.3 (emulator)
但是，这个问题在Android 4.4.2（模拟器）上不是 。
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.
这里的代码 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;
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.
问题最好用 left：150px; 替换 left：25px; 在 .category CSS规则。当我这样做，这是它看起来像在一个工作的浏览器：
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:
这是在Android的股票浏览器中的样子：
And this is what it looks like in Android's stock browser:
请注意，它适用于Chrome for Android。
One other thing I should note is that it works in Chrome for Android.
有没有办法让我在Android的股票浏览器中工作？
Is there a way that I can make this work in Android's stock browser?
推荐答案
我有股票Gingerbread Android浏览器的问题。它不处理溢出CSS属性很好。为了在这个浏览器上滚动，我不得不应用溢出（滚动或自动）到BODY容器。
I've had issues with the stock Gingerbread Android browser. It does not handle the overflow CSS property well at all. In order to enable scrolling on this browser I had to apply the overflow ("scroll" or "auto") to the BODY container only.
这篇关于Android股票浏览器不尊重CSS溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
