Больше прокрутки переполнены Div с Javascript

Question

Мой вопрос в основном восходит к этому: Прокрутка переполненных DIVS с помощью JavaScript

Я хочу знать, как это сделать без использования jQuery. Любая помощь будет оценена. Заранее спасибо!

Также: в связанном вопросе прокручивает ли div на одну полную высоту прокрутки каждый раз, когда выполняется код? Если это так, как я могу сделать это прокрутить вниз с позиции мыши? Другими словами, как только я переместил мышь к нижней части элемента div, как я могу заставить элемент div продолжать прокручивать вниз и, возможно, оставить курсор мыши в том же положении (это условие не требуется, но оценивается)? Еще раз спасибо заранее

Answer 1

Я верю, что точно знаю, как реализовать эффект, который вы ищете. Я просто использую события onmouseover и onmouseout для запуска и остановки механизма интервалов JavaScript, который использует свойство scrollTop рассматриваемого div для эмуляции прокрутки. Повернись:

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