在鼠标滚动时触发 keydown 事件

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>