More Scrolling Overflowed Divs with Javascript

Question

Hi. My question basically goes back to this: Scrolling Overflowed DIVS with JavaScript

I want to know how to do that without using jQuery. Any help would be appreciated. Thanks in advance!

Also: in the linked question, does it scroll the div down one full scroll height each time the code is executed? If so, how can I make it scroll down with the mouse position? In other words, once I move a mouse to the bottom of the div, how can I make the div continue to scroll down, and possibly have the mouse cursor remain in the same position (this condition isn't needed but appreciated)? Thanks again in advance!

Answer 1

I do believe I know precisely how to implement the effect you're looking for. I'm merely using the onmouseover and onmouseout events to start and stop a JavaScript interval mechanism which uses the scrollTop property of the div in question to emulate scrolling. Give it a whirl:

The CSS:

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

The HTML:

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

The JavaScript:

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