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.
Is it possible to use the keys directly on first load of the page without necessarily clicking it?
I need the arrow keys to be functional directly and start the horizontal scroll inside that particular div, if that’s possible.
<div id="scroll" tabindex="0">
<ul class=“box” >
<div class=“insidebox >
*/content here using various div to fill the box/*
</div>
</ul>
</div>
<script type="text/javascript">
document.getElementById("scroll").focus();
document.getElementById("box").focus();
document.getElementById("insidebox").focus();
</script>
#scroll {
grid-column:1/2;
grid-row: 2/4;
}
.box {
grid-column:1/2;
grid-row: 2/4;
display: grid;
grid-template-columns: repeat(20,1fr);
overflow-x: scroll;
scroll-snap-type: x proximity;
}
.box::-webkit-scrollbar { width: 0 !important }
.box { overflow: -moz-scrollbars-none; }
.box { -ms-overflow-style: none; }
Advertisement
Answer
OK – here is an example of what I mean. If we set the div to have tabindex=0 and add a script to the end of the tbody element that sets the focus to the div, the left/right cursors keys work on the div scrollbar.
#scrolldiv {height:100px; width:1000px; overflow-x:scroll; white-space: nowrap;}<div id="scrolldiv" tabindex=0>
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
</div>
<div>
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
</div>
<script type="text/javascript">
document.getElementById("scrolldiv").focus();
</script>To use a class, here is my entire test page:
<!DOCTYPE html>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<html>
<head>
<title>Scrolling div on first load</title>
<script type="text/javascript">
// no script needed here for this functionality
</script>
<style type="text/css">
.scrolldiv {height:100px; width:1000px; overflow-x:scroll; white-space: nowrap;}
.firstdiv {}
</style>
</head>
<body>
<div class="scrolldiv firstdiv" tabindex=0>
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
</div>
<div class="scrolldiv">
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
</div>
<script type="text/javascript">
// Set the focus to the first (and ONLY) div that uses the 'firstdiv' class
// This ensures that we only target one div as there may be many using 'scrolldiv' and these could appear in any order on the page
document.getElementsByClassName("firstdiv")[0].focus();
</script>
</body>
</html>