Прокрутка для элемента [закрыт]

131

25 января 2022, 22:10

Закрыт. Данный вопрос необходимо конкретизировать. Ответы на него в данный момент не принимаются.

Хотите улучшить этот вопрос? Переформулируйте вопрос так, чтобы он был сосредоточен только на одной проблеме.

Закрыт 2 года назад.

Улучшить вопрос

кто может может помочь?

Суть токава мне нужно сделать так что бы при наведение или при переключение стрелочками на клавиатуре элемент точно находился внутри элемента menuElements и если элемент li вылазит за рамки то подкрутить scroll.

И еще при наведение на menuElements scroll блокировался.

Хочу сделать также как и в https://vk.com/edit хороший пример в элементе День рождения: Год

window.document.onkeydown = function() { 
 
    var input = document.querySelector('ul').querySelector('li.active'); 
    var key = event.keyCode; 
    var needFocusElement = true; 
    try { 
        switch (key) { 
            case 38: // стрелка вверх 
                needFocusElement = input.previousElementSibling; 
                break; 
            case 40: // стрелка вниз 
                needFocusElement = input.nextElementSibling; 
                break; 
            default: 
                needFocusElement = false; 
        } 
    } catch (e) { 
        needFocusElement = false; 
    } 
 
    if (!needFocusElement) return; 
 
    input.classList.remove('active'); 
    needFocusElement.classList.add('active'); 
} 
document.querySelector('.menuElements').onmouseover = function() { 
    if (!event.target.closest('li')) return; 
    event.target.closest('li').classList.add('active'); 
    event.target.closest('.menuElements').querySelectorAll('li').forEach(notActive => { 
        if (event.target.closest('li') == notActive) return; 
        else notActive.classList.remove('active'); 
    }); 
};

* {margin: 0;padding: 0;outline: none;} 
body { 
    color: #000; 
    background-color: #EDEEF0; 
    font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, Geneva, Noto Sans Armenian, Noto Sans Bengali, Noto Sans Cherokee, Noto Sans Devanagari, Noto Sans Ethiopic, Noto Sans Georgian, Noto Sans Hebrew, Noto Sans Kannada, Noto Sans Khmer, Noto Sans Lao, Noto Sans Osmanya, Noto Sans Tamil, Noto Sans Telugu, Noto Sans Thai, sans-serif; 
} 
li {list-style-type: none;} 
 
.menuElements { 
    width: 350px; 
    min-height: 0; 
    max-height: 150px; 
    overflow: auto; 
    background-color: white; 
    border: 1px solid blue; 
    margin: 10px; 
} 
.menuElements > li { 
    width: 100%; 
    height: 35px; 
    border-bottom: 1px solid green; 
    line-height: 34px; 
    padding: 0 15px; 
    box-sizing: border-box; 
} 
ul > .active { 
    background-color: red; 
}

    
 
<body style="height: 2000px;"> 
<ul class="menuElements"> 
<li class="active">Element1</li> 
<li>Element2</li> 
<li>Element3</li> 
<li>Element4</li> 
<li>Element5</li> 
<li>Element6</li> 
<li>Element7</li> 
<li>Element8</li> 
<li>Element9</li> 
<li>Element10</li> 
<li>Element11</li> 
<li>Element12</li> 
<li>Element13</li> 
<li>Element14</li> 
<li>Element15</li> 
<li>Element16</li> 
<li>Element17</li> 
<li>Element18</li> 
<li>Element19</li> 
<li>Element20</li> 
<li>Element21</li> 
<li>Element22</li> 
<li>Element23</li> 
<li>Element24</li> 
<li>Element25</li> 
<li>Element26</li> 
<li>Element27</li> 
<li>Element28</li> 
<li>Element29</li> 
<li>Element30</li> 
<li>Element31</li> 
<li>Element32</li> 
<li>Element33</li> 
<li>Element34</li> 
<li>Element35</li> 
<li>Element36</li> 
<li>Element37</li> 
<li>Element38</li> 
<li>Element39</li> 
<li>Element40</li> 
</ul> 
</body>