javascript - 更多使用 Javascript 滚动溢出的 Div

Question

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

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

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

Answer 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>   

<div id="testDiv">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.</div>