以下是一个示例代码,实现了按下键盘时在DIV中滚动文本的效果:
HTML部分:
这是一段需要滚动的文本
CSS部分:
#scrollText {
width: 300px;
height: 200px;
overflow: hidden;
border: 1px solid #ccc;
}
#scrollText p {
margin: 0;
padding: 0;
line-height: 30px;
}
JavaScript部分:
document.addEventListener('keydown', function(event) {
var scrollText = document.getElementById('scrollText');
var scrollHeight = scrollText.scrollHeight;
var scrollTop = scrollText.scrollTop;
var lineHeight = parseInt(window.getComputedStyle(scrollText.querySelector('p')).lineHeight);
if (event.key === 'ArrowUp') {
scrollText.scrollTop -= lineHeight;
} else if (event.key === 'ArrowDown') {
scrollText.scrollTop += lineHeight;
}
// 阻止默认的键盘事件
event.preventDefault();
});
以上代码实现了按下向上箭头键(ArrowUp)时,将DIV中的文本向上滚动一行;按下向下箭头键(ArrowDown)时,将DIV中的文本向下滚动一行。这里假设文本行高固定为30px。
请将以上代码放入HTML页面中,运行后即可实现按下键盘时在DIV中滚动文本的效果。