html - pwa - web app ipad
Safari 8 problema de desplazamiento de selección múltiple (1)
Creo que esto es, de hecho, algún tipo de error que tiene que ver con el ancho del elemento de selección frente a la altura de desplazamiento del elemento.
Cuantas más opciones tenga, más amplia puede ser y aún funciona bien. Si tengo una etiqueta de selección con 39 opciones, el máximo parece estar alrededor de 510px antes de que se estropee.
En promedio, el ancho máximo que una selección puede manejar parece ser aproximadamente 13px por opción. Entonces, si tiene un selector con 13 opciones, entonces el máximo es aproximadamente 169px (13 * 13)
Cuando se desplaza a la segunda opción, scrollTop es 14px y a la tercera opción, 28px. Así que cada elemento al que se desplaza es 14px. Entonces, siempre que el ancho sea menor que el scrollHeight menos un cierto número de píxeles, funciona ... Si usa los 13 píxeles por opción, parece funcionar bien.
Entonces, tienes 2 opciones.
- Asegúrese de que el ancho de su selección sea menor que 13 * el número de opciones
O
- Use javascript para obtener el comportamiento deseado ... Se me ocurrió un JsFiddle que funciona. Y para aquellos que les gusta usar jQuery, pruebe este JsFiddle
Solo tiene que escuchar el evento keydown y ajustar el desplazamiento para que el elemento seleccionado esté a la vista antes de que se seleccione.
Además, para que el método scrollByLines (numberOfLines) funcione en el elemento scroll, debe tener el siguiente estilo:
overflow-y: scroll;
Aquí hay un documento HTML rápido que funciona
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
// This happens on document load
function myOnLoad() {
// Get the selector element
var mySelector = document.getElementById(''mySelector'');
// If the selector is doomed to glitch out on us because it''s wider than the max allowed width, we need to fix it
if (mySelector.offsetWidth > 13 * mySelector.options.length) {
// Figure out the pixels for a single scroll line
mySelector.scrollByLines(1);
var scrollLineHeight = mySelector.scrollTop;
// Scroll back to the top
mySelector.scrollTop = 0;
// Add a keydown event listener so that we can scroll programatically before it messes up
mySelector.addEventListener(''keydown'', function (e) {
// Only listen to up and down arrows
if (e.keyCode !== 38 && e.keyCode !== 40) {
return;
}
// Figure out where the selector is scrolled to
var scrollTop = this.scrollTop;
var scrolledToLine = parseInt(scrollTop / scrollLineHeight);
// If we hit the up arrow and the selected index is equal to the scrolled line, simply move us up by one
if (e.keyCode === 38 && this.selectedIndex === scrolledToLine) {
this.scrollByLines(-1);
}
// If we hit the down arrow and the selected index is equal to the scrolled line + the number of visible lines - 1, move us down by one
if (e.keyCode === 40 && this.selectedIndex === scrolledToLine + (this.size - 1)) {
this.scrollByLines(1);
}
});
}
}
</script>
</head>
<body onload="myOnLoad();">
<select size="5" name="selectMultiple" multiple="multiple" style="width:100%; overflow-y: scroll;" id="mySelector">
<option value="0">line 0</option>
<option value="1">line 1</option>
<option value="2">line 2</option>
<option value="3">line 3</option>
<option value="4">line 4</option>
<option value="5">line 5</option>
<option value="6">line 6</option>
<option value="7">line 7</option>
<option value="8">line 8</option>
<option value="9">line 9</option>
<option value="10">line 10</option>
<option value="11">line 11</option>
<option value="12">line 12</option>
</select>
</body>
</html>
Y aquí está la versión jQuery:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
// Get the selector element
var mySelectorObj = $(''#mySelector'');
var mySelector = mySelectorObj[0];
// If the selector is doomed to glitch out on us because it''s wider than the max allowed width, we need to fix it
if (mySelector.offsetWidth > 13 * mySelector.options.length) {
// Figure out the pixels for a single scroll line
mySelector.scrollByLines(1);
var scrollLineHeight = mySelector.scrollTop;
// Scroll back to the top
mySelector.scrollTop = 0;
// Add a keydown event listener so that we can scroll programatically before it messes up
mySelectorObj.on(''keydown'', function(e) {
// Only listen to up and down arrows
if (e.keyCode !== 38 && e.keyCode !== 40) {
return;
}
// Figure out where the selector is scrolled to
var scrollTop = this.scrollTop;
var scrolledToLine = parseInt(scrollTop / scrollLineHeight);
// If we hit the up arrow and the selected index is equal to the scrolled line, simply move us up by one
if (e.keyCode === 38 && this.selectedIndex === scrolledToLine) {
this.scrollByLines(-1);
}
// If we hit the down arrow and the selected index is equal to the scrolled line + the number of visible lines - 1, move us down by one
if (e.keyCode === 40 && this.selectedIndex === scrolledToLine + (this.size - 1)) {
this.scrollByLines(1);
}
});
}
});
</script>
</head>
<body>
<select size="5" name="selectMultiple" multiple="multiple" style="width:100%; overflow-y: scroll;" id="mySelector">
<option value="0">line 0</option>
<option value="1">line 1</option>
<option value="2">line 2</option>
<option value="3">line 3</option>
<option value="4">line 4</option>
<option value="5">line 5</option>
<option value="6">line 6</option>
<option value="7">line 7</option>
<option value="8">line 8</option>
<option value="9">line 9</option>
<option value="10">line 10</option>
<option value="11">line 11</option>
<option value="12">line 12</option>
</select>
</body>
</html>
He estado encontrando un problema al usar varios campos de selección selecta dentro de Safari 8 en OS X Yosemite . Si el campo de selección tiene un ancho aplicado, ya sea en línea o como clase, no puedo usar las teclas de flecha del teclado para desplazarme hacia abajo a través de la selección según el comportamiento normal.
<select size="5" name="selectMultiple" multiple="multiple">
Selección múltiple de JSFiddle .
<select size="5" name="selectMultiple" multiple="multiple" style="width:100%;">
con etiqueta de estilo JSFiddle .
Cuando la selección tiene estilo, la selección se mueve fuera de la vista en lugar de desplazarse hacia abajo en la lista manteniendo el elemento seleccionado a la vista.
¿Se trata de un error en la versión de Safari (versión 8.0 (10600.1.25)) que estoy usando? Estoy usando BrowserStack para mis pruebas. ¿O es algo que puedo solucionar con una solución a través de mi código?
Gracias.