更多使用 Javascript 滚动溢出的 Div

【问题标题】：More Scrolling Overflowed Divs with Javascript更多使用 Javascript 滚动溢出的 Div
【发布时间】：2010-10-03 15:17:54
【问题描述】：

我的问题基本上可以追溯到这个：Scrolling Overflowed DIVS with JavaScript

我想知道如何在不使用 jQuery 的情况下做到这一点。任何帮助，将不胜感激。提前致谢！

另外：在链接的问题中，是否每次执行代码时都会将 div 向下滚动一个完整的滚动高度？如果是这样，我怎样才能让它随着鼠标位置向下滚动？换句话说，一旦我将鼠标移动到 div 的底部，我怎样才能使 div 继续向下滚动，并且可能让鼠标光标保持在同一位置（这种情况不是必需的，但值得赞赏）？再次提前感谢！

【问题讨论】：

jQuery 只是一个 JavaScript 库，并且是开源的。看看 jQuery 是如何做到的，如果你愿意，可以复制/粘贴相关的部分（它是 MIT 许可的）。

标签： javascript html scroll

【解决方案1】：

我相信我确切地知道如何实现您正在寻找的效果。我只是使用 onmouseover 和 onmouseout 事件来启动和停止 JavaScript 间隔机制，该机制使用相关 div 的 scrollTop 属性来模拟滚动。试一试：

<script>
var interval, cur_scroll = 0;
    
function scroll()
{
  interval = setInterval(function()
  {
    cur_scroll += 2;
    document.getElementById('testDiv').scrollTop = cur_scroll;
  }, 40);
}
     
function stop()
{
  clearInterval(interval);
}
    
document.getElementById('testDiv').setAttribute('onmouseover', 'scroll()');
document.getElementById('testDiv').setAttribute('onmouseout', 'stop()');
</script>

<style>
#testDiv
{
  width: 100px;
  height: 100px;
  overflow: hidden;
  border: 1px solid #000000;
}
</style>

&lt;div id="testDiv"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum libero sit amet diam. In hac habitasse platea dictumst. Cras eleifend tortor scelerisque mi viverra malesuada.&lt;/div&gt;

【讨论】：