Рабочий скролл при пролистывании div при нажатии стрелок на клавиатуре

Question

У меня появилась проблема. У меня есть общий блок .content и коллекция div в этом контенте. Есть js который отвечает за выделение блока(работает как и при нажатии на стрелки на клавиатуре, так и при нажатии на клик мыши. Суть проблемы. При пролистывании стрелками, скролл не работает(блоки выделяются как и надо, но скролл не работает). Как это можно решить?

`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style_1.css">
    <title>Document</title>
</head>
<body>
    <div class="content">
        <div class="block">  
            1      
        </div>
        <div class="block">    
            2    
        </div>
        <div class="block">  
            3      
        </div>
        <div class="block"> 
            4       
        </div>
        <div class="block"> 
            5       
        </div>
        <div class="block">  
            6      
        </div>
        <div class="block"> 
            7       
        </div>
    </div>
</body>
<script src="js.js"></script>
</html`

```body
{
    margin: 0;
    display: grid;
    justify-content: center;
}
.content
{
   
    width: 30vw;
    height: 30vw;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid black;
   
}

.block
{
    display: flex;
    text-align: center;
    height: 5vw;
    background-color: brown;
    margin: 0 0 1vw;
}

.content .active{
    background-image: linear-gradient(0deg, #5dcc41 0%, #31d86f 100%);
    color: #ffffff;
  }```

`/**
 * @param {number} value 
 * @param {number} min 
 * @param {number} max 
 */
function minMax(value, min, max) {
  return Math.min(Math.max(value, min), max)
}

/**
 * @param {HTMLElement} container 
 * @param {string} queryItem 
 */
function listItems(container, queryItem) {
  const items = [...container.querySelectorAll(queryItem)]
  const { length } = items
  const activeClass = 'active'
  const state = { selected: 0 }

  function update() {
    for (let i = 0; i < length; i++) {
      if (i == state.selected)
        items[i].classList.add(activeClass)
      else
        items[i].classList.remove(activeClass)
    }
  }

  const fix = () => {
    if (state.selected >= length) state.selected = length - 1
    if (state.selected < 0) state.selected = 0
  }

  const incState = () => {
    state.selected++
    fix()
    update()
  }

  const decState = () => {
    state.selected--
    fix()
    update()
  }

  /**
   * @param {KeyboardEvent} param0 
   */
  const keyDown = ({ key }) => {
    if (key === 'ArrowUp') decState()
    if (key === 'ArrowDown') incState()
  }

  addEventListener('keydown', keyDown)

  /**
   * @param {number} index 
   */
  function select(index) {
    state.selected = minMax(index, 0, length - 1)
    update()
  }

  for (let i = 0; i < length; i++) {
    items[i].onclick = select.bind(null, i)
  }

  update()

  return () => {
    removeEventListener('keydown', keyDown)

    for (let i = 0; i < length; i++) {
      items[i].onclick = null
      delete items[i].onclick
    }
  }
}
listItems(document.querySelector('.content'), '.block')`

БЛОГ НА HUSL

Рабочий скролл при пролистывании div при нажатии стрелок на клавиатуре

Ответы (0 шт):