Как прокручивать div клавишами?

Question

[jhfiowejio]

Есть div на странице, ему дан overflow: scroll
Высота html дана 100%
Теперь когда нажимаешь на кнопки ArrowUp и ArrowDown ничего не происходит, а я хочу чтобы скроллировался div
Можно ли это сделать без всяких прибавлений, вычитаний?

Comments

[Ankhena]

этот div должен быть в фокусе

Answer 1

[Daniel SERG]

живой пример в виде кода

<div id="scr"style="height:15%;overflow:scroll;">
    <p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p><p>ds</p>
<script>
       // document.addEventListener('keydown', function(event) {
       //      console.log(event)
       //  });
        let speed = 100
        let sid = document.getElementById("scr")
        document.addEventListener('keydown', function(event) {
            //console.log(event)
            if(event.key == "ArrowUp"){
                sid.scrollBy(0,-speed)
            }
            if(event.key == "ArrowDown"){
                sid.scrollBy(0,speed)
            }

        });
        
</script>

Comments

[jhfiowejio]

Ох, scrollBy, их там столько этих скроллов, надо было все перебрать
Спасибо!