Question

我在构建的页面上使用水平滚动。它位于div中，并用一个类命名。我想使用箭头键进行滚动。为了使它与键滚动，我需要单击它的某个位置。

是否可以在第一次加载页面时直接使用这些键而不必单击它？

如果可能，我需要箭头键直接起作用并在该特定div内开始水平滚动。

<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; }

Answer 1

好的-这是我的意思的示例。如果我们将div设置为具有tabindex=0并在tbody元素的末尾添加一个将焦点设置为div的脚本，则左/右光标键将在div滚动条上起作用。

#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>

要使用课程，这是我的整个测试页：

<!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>

使用箭头键进行水平滚动

1 个答案: