Элементы списка не отображаются с первого раза, когда количество элементов в списке превышает высоту экрана
Нам нужно воспроизвести видео, и когда пользователь нажимает клавишу «m», нам нужно разделить экран на 2 половины по вертикали. Одна половина должна отображать только текст «DVR», а другая половина должна отображать список с 30 элементами (это число только для целей тестирования. Первоначально мы будем получать номер с сервера). Каждый элемент списка будет содержать изображение и некоторый текст. Когда мы отображаем меню, элементы списка всегда должны быть видны с первого, а первый элемент должен быть в фокусе. Когда мы нажимаем клавишу, фокус должен быть перемещен на второй элемент ... Ниже приведен код.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>VOD</title>
<script src='lib/hls.js'></script>
<script src='js/index.js'></script>
<style>
html, body
{
height:100%;
width: 100%;
overflow: hidden;
}
#vid
{
position: fixed;
top: 50%;
left: 50%;
z-index: -1;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
}
#mid {
display: flex;
width: 100%;
height: 100%;
justify-content: stretch;
flex-flow: row nowrap;
z-index: 2;
}
#mid.hidden {
display: none;
}
#mid1, #mid2 {
display: flex;
flex: 1;
align-items: center;
}
#mid1 {
justify-content: center;
background-color: rgba(255, 255, 255, 0.5);
}
#mid2 {
background-color: rgba(255, 255, 255, 0.6);
}
#ulid {
list-style-type: none;
width: 100%;
margin: 0;
border: 0;
padding: 0;
}
.list-item {
width: 100%;
height: 150px;
border-style: solid;
border-width: 1px;
display:flex;
align-items: center;
justify-content: flex-start;
}
li:focus {
background-color: lightslategray;
}
</style>
</head>
<body>
<video id='vid' src='textMotion.mp4' autoplay loop></video>
<div id='mid' class='hidden'>
<div id = "mid1">
<h1>DVR</h1>
</div>
<div id = "mid2">
<ol id='ulid'></ol>
</div>
</div>
</body>
</html>
JavaScript:
var foc_list_index = 0;
function processListEvent(event) {
console.info('list Event : ' + event.keyCode + 'focused li ' + foc_list_index);
let keyCode = event.keyCode;
// Down
if (keyCode == 40) {
foc_list_index ++;
document.getElementById('li' + foc_list_index).focus();
}
// Up
if (keyCode == 38) {
if (foc_list_index == 0) {
console.info('Ignoring key up as we are already at first list index');
return;
}
foc_list_index --;
document.getElementById('li' + foc_list_index).focus();
}
}
function displayMenu() {
let mid = document.getElementById('mid');
// If already menu is visible, hide it
if (mid.classList.contains('hidden') == false) {
mid.classList.toggle('hidden');
let ulid = document.getElementById('ulid');
while(ulid.firstChild) {
ulid.removeChild(ulid.firstChild);
}
return;
}
let ulid = document.getElementById('ulid');
for(let index = 0; index < 30; index ++) {
let lItem = document.createElement('li');
lItem.classList.add('list-item');
lItem.setAttribute('id', 'li' + index);
lItem.setAttribute('tabindex', index);
lItem.addEventListener('keydown', processListEvent, false);
let img = document.createElement("img");
img.src = 'img/TNT.png';
lItem.appendChild(img);
lItem.appendChild(document.createTextNode('Showing ID : ' + index));
ulid.appendChild(lItem);
}
mid.classList.toggle("hidden");
document.getElementById('li0').focus();
foc_list_index = 0;
}
function processKeyPress(e) {
console.info('received keyEvent : ' + e.keyCode);
let keyCode = e.keyCode;
let mid = document.getElementById('mid');
// Menu button or key 'm'
if ((keyCode == 77) || (keyCode == 462)) {
displayMenu();
}
}
document.addEventListener('keydown', processKeyPress);
Этот код работает нормально, за исключением проблем, указанных ниже.
1) Когда пользователь нажимает 'm', отображается меню, а вторая половина отображается из элемента списка 12. Несмотря на то, что присутствуют элементы списка от 0 до 29, оно отображается из элемента списка 12. Но оно должно отображаться из списка. пункт 0. Я выяснил причину этой проблемы. Это потому, что я сохраняю «align-items: center»; и для mid1, и для mid2, чтобы текст оставался на первом экране, а список на втором экране должен быть центрирован по вертикали. Если я удалю "align-items: center;" для mid2 список отображается правильно, но когда в списке очень мало элементов, таких как 3 (вместо 30), список не отображается по центру по вертикали. Не знаю, как решить эту проблему.
2) Когда я нажимаю клавишу, как только фокус пересекает видимый элемент списка, левая половина экрана также перемещается, что не должно перемещаться.
Снимок экрана для первой проблемы (элементы списка должны отображаться с 0, когда пользователь выбирает 'm')
Снимок экрана для проблемы, если я удалю "align-items: center;" для mid2 и в списке 3 пункта (вместо 30). Список должен быть центрирован по вертикали.
Снимок экрана для второй проблемы (перемещается левая половина экрана, которую нельзя перемещать, когда фокус пересекает видимый элемент списка, нажимая клавишу вниз)
Может ли кто-нибудь помочь мне исправить эти проблемы.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я думаю, что если вы используете justify-content:flex-start (или baseline), это решит проблему с числами (см. эта рабочий пример). Если вы включите высоту для img, это отобразит элементы более четко, чем в первой скрипке (см. Вот этот), однако это повлияет на ширина. Левое видео не движется в этих рабочий примерх, только h1. Мне было непонятно по этому поводу. Вы могли бы включить его в видео div? (но, возможно, вы хотите, чтобы это было наложение? ..)
В любом случае, это начало ... надеюсь, это поможет ...