Question

在div上，使用overflow-y: scroll，如何使用keypress down（没有jQuery）向下滚动。

<div class="data">
    ...
    number of data
</div>
<style>
    .data {
        background-color: blue;
        text-align: center;
        overflow-y: scroll;
        margin-left: 700px;
        margin-top: 50px;
        height: 400px;
        width: 150px;
    }
</style>

https://codepen.io/SahilKatia/pen/GYVzxR

链接到Angular Project。

Answer 1

如果将属性tabindex="0"添加到.data div中，将使其变为“可聚焦”，并让您在聚焦时使用键盘上下滚动。

我假设您只希望键盘箭头在焦点对准时滚动div，否则您将不得不覆盖现有的全窗口滚动功能，如下所示：

const dataDiv = document.querySelector('body > div.data')
window.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowUp') {
    e.preventDefault();
    dataDiv.scrollTo(0, dataDiv.scrollTop - 10)
  } else if (e.key === 'ArrowDown') {
    e.preventDefault();
    dataDiv.scrollTo(0, dataDiv.scrollTop + 10)
  }
})

Answer 2

希望这是您要寻找的功能。在@Graham的注释的基础上，您可以使用JavaScript来将焦点放在页面加载时的.data div上，从而使用户可以使用上/下键滚动表，而无需进行初始单击。

window.onload = function() {
  document.getElementById("auto-focus").focus();
};

.data {
  margin-top:50px;
  margin-left:700px;
  text-align:center;
  overflow-y:scroll;
  height:400px;
  background-color:blue;
  width:150px;  
}

<div class="data" tabindex="0" id="auto-focus">
		<table cellpadding="1" cellspacing="1">
			<tbody>
				<tr>
					<td>Octavius</td>
				</tr>
				<tr>
					<td>Amal</td>
				</tr>
				<tr>
					<td>Hayes</td>
				</tr>
				<tr>
					<td>Arsenio</td>
				</tr>
				<tr>
					<td>Jackson</td>
				</tr>
				<tr>
					<td>Chadwick</td>
				</tr>
				<tr>
					<td>Hall</td>
				</tr>
				<tr>
					<td>Chaim</td>
				</tr>
				<tr>
					<td>Kennedy</td>
				</tr>
				<tr>
					<td>Oliver</td>
				</tr>
				<tr>
					<td>Vincent</td>
				</tr>
				<tr>
					<td>Giacomo</td>
				</tr>
				<tr>
					<td>Sebastian</td>
				</tr>
				<tr>
					<td>Oren</td>
				</tr>
				<tr>
					<td>Perry</td>
				</tr>
				<tr>
					<td>Jesse</td>
				</tr>
				<tr>
					<td>Laith</td>
				</tr>
				<tr>
					<td>Kirk</td>
				</tr>
				<tr>
					<td>Christopher</td>
				</tr>
				<tr>
					<td>Oren</td>
				</tr>
				<tr>
					<td>Donovan</td>
				</tr>
				<tr>
					<td>Peter</td>
				</tr>
				<tr>
					<td>Chandler</td>
				</tr>
				<tr>
					<td>Rajah</td>
				</tr>
				<tr>
					<td>Lyle</td>
				</tr>
				<tr>
					<td>Rogan</td>
				</tr>
				<tr>
					<td>Colt</td>
				</tr>
				<tr>
					<td>Rooney</td>
				</tr>
				<tr>
					<td>Cruz</td>
				</tr>
				<tr>
					<td>Connor</td>
				</tr>
				<tr>
					<td>Walter</td>
				</tr>
				<tr>
					<td>Roth</td>
				</tr>
				<tr>
					<td>Adam</td>
				</tr>
				<tr>
					<td>Roth</td>
				</tr>
				<tr>
					<td>Kibo</td>
				</tr>
				<tr>
					<td>Sebastian</td>
				</tr>
				<tr>
					<td>Lawrence</td>
				</tr>
				<tr>
					<td>Valentine</td>
				</tr>
				<tr>
					<td>Dorian</td>
				</tr>
				<tr>
					<td>Yuli</td>
				</tr>
				<tr>
					<td>Matthew</td>
				</tr>
				<tr>
					<td>Wang</td>
				</tr>
				<tr>
					<td>Elton</td>
				</tr>
				<tr>
					<td>Chadwick</td>
				</tr>
				<tr>
					<td>Kibo</td>
				</tr>
				<tr>
					<td>Reuben</td>
				</tr>
				<tr>
					<td>Rashad</td>
				</tr>
				<tr>
					<td>Kibo</td>
				</tr>
				<tr>
					<td>Orlando</td>
				</tr>
				<tr>
					<td>Amir</td>
				</tr>
				<tr>
					<td>William</td>
				</tr>
				<tr>
					<td>Lester</td>
				</tr>
				<tr>
					<td>Timon</td>
				</tr>
				<tr>
					<td>William</td>
				</tr>
				<tr>
					<td>Dale</td>
				</tr>
				<tr>
					<td>Timothy</td>
				</tr>
				<tr>
					<td>Lyle</td>
				</tr>
				<tr>
					<td>Erasmus</td>
				</tr>
				<tr>
					<td>Amos</td>
				</tr>
				<tr>
					<td>Gary</td>
				</tr>
				<tr>
					<td>Dexter</td>
				</tr>
				<tr>
					<td>Malcolm</td>
				</tr>
				<tr>
					<td>Hyatt</td>
				</tr>
				<tr>
					<td>Sawyer</td>
				</tr>
				<tr>
					<td>Elton</td>
				</tr>
				<tr>
					<td>Kennan</td>
				</tr>
				<tr>
					<td>Alec</td>
				</tr>
				<tr>
					<td>Prescott</td>
				</tr>
				<tr>
					<td>Omar</td>
				</tr>
				<tr>
					<td>Jason</td>
				</tr>
				<tr>
					<td>Ignatius</td>
				</tr>
				<tr>
					<td>Isaac</td>
				</tr>
				<tr>
					<td>Aidan</td>
				</tr>
				<tr>
					<td>Gabriel</td>
				</tr>
				<tr>
					<td>Brody</td>
				</tr>
				<tr>
					<td>Emerson</td>
				</tr>
				<tr>
					<td>Burton</td>
				</tr>
				<tr>
					<td>Axel</td>
				</tr>
				<tr>
					<td>Clinton</td>
				</tr>
				<tr>
					<td>Abdul</td>
				</tr>
				<tr>
					<td>Philip</td>
				</tr>
				<tr>
					<td>Harding</td>
				</tr>
				<tr>
					<td>Lee</td>
				</tr>
				<tr>
					<td>Denton</td>
				</tr>
				<tr>
					<td>Kevin</td>
				</tr>
				<tr>
					<td>Rashad</td>
				</tr>
				<tr>
					<td>Davis</td>
				</tr>
				<tr>
					<td>Hasad</td>
				</tr>
				<tr>
					<td>Nehru</td>
				</tr>
				<tr>
					<td>Galvin</td>
				</tr>
				<tr>
					<td>Isaiah</td>
				</tr>
				<tr>
					<td>Fritz</td>
				</tr>
				<tr>
					<td>Wallace</td>
				</tr>
				<tr>
					<td>Barclay</td>
				</tr>
				<tr>
					<td>Harding</td>
				</tr>
				<tr>
					<td>Dieter</td>
				</tr>
				<tr>
					<td>Emmanuel</td>
				</tr>
				<tr>
					<td>Burke</td>
				</tr>
				<tr>
					<td>Caesar</td>
				</tr>
				<tr>
					<td>Randall</td>
				</tr>
			</tbody>
		</table>
	</div>

在mousescroll上触发keydown事件

2 个答案: