only - Android Stock Browser no respeta el desbordamiento de CSS
if not chrome css (2)
Estoy trabajando con un cliente que quisiera que parte de su interfaz tuviera un método de desplazamiento algo personalizado. No quieren que las barras de desplazamiento habituales sean visibles; quieren que los usuarios de computadoras de escritorio / portátiles se desplacen con la rueda del mouse / touchpad y quieren que los usuarios de dispositivos móviles se desplacen con el dedo. También desean gráficos de una flecha hacia arriba y una flecha hacia abajo para proporcionar un método alternativo de desplazamiento y también para que sea obvio para el usuario que el desplazamiento es posible (ya que las barras de desplazamiento reales están ocultas). El cliente se establece en este método de desplazamiento.
Reuní un código que funciona en todas las combinaciones de dispositivo / navegador en las que lo he probado, excepto en el navegador de valores de Android. He confirmado este problema con las siguientes configuraciones:
- Android 4.1.2 (emulador)
- Android 4.2.2 (dispositivo real)
- Android 4.2.2 (emulador)
- Android 4.3 (emulador)
Sin embargo, este problema no está presente en Android 4.4.2 (emulador).
Para mantener las cosas simples para esta pregunta, no incluyo los gráficos de las flechas hacia arriba y hacia abajo y la lógica que lo acompaña.
Aquí está el código ( 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>
Cuando toca en cualquiera de las tres opciones, una segunda lista de opciones debería aparecer a la derecha. Sin embargo, nunca aparece en el navegador de Android a menos que elimine overflow-y: scroll; de las reglas ul CSS, pero entonces ya no puede desplazarse.
El problema se ilustra mejor al reemplazar a la left: 150px; con left: 25px; en las reglas de .category CSS. Cuando hago eso, esto es lo que parece en un navegador que funciona:
Y esto es lo que parece en el navegador de Android:
Otra cosa que debo tener en cuenta es que funciona en Chrome para Android.
¿Hay alguna manera de hacer que esto funcione en el navegador de Android?
Creo que el navegador de Android no admite propiedades de desbordamiento específicas de x / y. En lugar de activar overflow-y, active overflow y luego apáguelo para overflow-x. Ejemplo:
ul {
margin: 0;
padding: 0;
list-style: none;
overflow-y: scroll;
}
debe convertirse:
ul {
margin: 0;
padding: 0;
list-style: none;
overflow: scroll;
overflow-x: visible;
}
Generalmente uso auto en lugar de scroll, por lo que las barras de desplazamiento no se mostrarán si no es necesario. Además, quizás overflow-x: hidden; Puede ser más deseable en su situación. Básicamente, esto aplicará su propiedad desbordada-y deseada a desbordado-x también, pero generalmente esto es más deseable que la regla que se ignora por completo. Para los navegadores que admiten los desbordamientos específicos del eje, el usuario no sabrá la diferencia.
He tenido problemas con el navegador de Android Gingerbread. No maneja bien la propiedad CSS de desbordamiento. Para habilitar el desplazamiento en este navegador tuve que aplicar el desbordamiento ("desplazamiento" o "automático") solo al contenedor BODY.