单击元素时滚动可滚动div内的内容
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了单击元素时滚动可滚动div内的内容相关的知识，希望对你有一定的参考价值。
我有一个高度有限的DIV，并且有一个可滚动的溢出。我想添加两个手动滚动链接，当它们被单击时，DIV内的内容向上或向下滚动。
CSS
#inner {
max-height: 400px;
overflow: scroll;
}
JS
function scrolldown() {
document.getElementById('#inner').scrollTop -= 10;
}
function scrollup() {
document.getElementById('#inner').scrollTop += 10;
}
<div id="inner">
Looooong content here
</div>
<a href="#" onClick="return false" onmousedown="javascript:scrollup();">
<img src="up.png"/>
</a>
<a href="#" onClick="return false" onmousedown="javascript:scrolldown();">
<img src="down.png"/>
</a>
然而，它并没有真正起作用......
答案
你不能在getElementById中使用CSS选择器。
function scrolldown() {
document.getElementById('inner').scrollTop -= 10;
}
function scrollup() {
document.getElementById('inner').scrollTop += 10;
}
另一答案
你使用了双选择器，getElementById在其参数中不需要#。如果你把javascript放在<head>标签之间它应该工作正常。
function scrolldown() {
document.getElementById('inner').scrollTop -= 10;
}
function scrollup() {
document.getElementById('inner').scrollTop += 10;
}
以上是关于单击元素时滚动可滚动div内的内容的主要内容，如果未能解决你的问题，请参考以下文章
使用纯 Javascript 滚动到可滚动 DIV 内的元素
当我在父级中使用 transform translateY(0) 时，可滚动 div 内的内容在 IE11 中闪烁