title: Make a div active without clicking somewhere in it
body: <p>I use a horizontal scroll on a page I built. It's inside a div, named it with a class, and I want to use the arrows keys to scroll. For it to scroll with the keys, I need to click somewhere on it.</p>
  <p>Is it possible to use the keys directly on first load of the page without necessarily clicking it?</p>
  <p>I need the arrow keys to be functional directly and start the horizontal scroll inside that particular div, if that's possible.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.scroll { grid-template-columns: repeat(15,1fr); overflow-x: scroll; scroll-snap-type: x proximity; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="scroll"&gt; &lt;div class="container"&gt; &lt;img src="ok.png"&gt; &lt;div class="inmiddle"&gt; &lt;div class="description"&gt; blablabla&lt;/div&gt; &lt;/div&gt; &lt;/div&gt;&lt;/li&gt;&lt;/ul&gt; </code></pre>
  </div>
  </div>
  </p>