Scrolling a div with the mouse wheel

JavaScript
1

I have been searching google for a solution to this, but I am having trouble finding something that works.

I simply want to be able to scroll the contents of a div (with no scrollbar) using the mouse wheel. The div should only scroll if the cursor is over the div when the wheel is moved.

Does anyone know where to find a good working solution to this?

2

Since moving the wheel scrolls the whole web page your div will not be under the mouse cursor for long.

Where the browser interprets input for its own use (as it does with shortcut keys and the mouse wheel) those commands never reach the web page for JavaScript to see them.

3

Generally if you click on a scrollable div, you can use the mouse wheel to scroll through its contents, without scrolling the entire page.
Perhaps there is a way to set the focus on a div by clicking it, or better yet, by simply hovering over it?

I have seen working examples of divs using custom scrollbars based on javascript. The mouse wheel on these divs works just as it would normally.

Here is one example:
http://www.jools.net/projects/javascript/scrollable-divs/

Update:
I tried using this site as a reference:

I couldn’t get it to work right, but it does succeed at NOT scrolling the entire page while the cursor is over the div.

4

I only took a brief look at the first example. It seems like the second example is alittle bit better. Just take this code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#scroll {
    width: 250px;
    height: 50px;
    border: 2px solid black;
    background-color: lightyellow;
    top: 100px;
    left: 50px;
    position:absolute;
}


</style>
<script type="text/javascript">

window.onload = function()
{
    //adding the event listerner for Mozilla
    if(window.addEventListener)
        document.addEventListener('DOMMouseScroll', moveObject, false);

    //for IE/OPERA etc
    document.onmousewheel = moveObject;
}
function moveObject(event)
{
    var delta = 0;

    if (!event) event = window.event;

    // normalize the delta
    if (event.wheelDelta) {

        // IE and Opera
        delta = event.wheelDelta / 60;

    } else if (event.detail) {

        // W3C
        delta = -event.detail / 2;
    }

    var currPos=document.getElementById('scroll').offsetTop;

    //calculating the next position of the object
    currPos=parseInt(currPos)-(delta*10);

    //moving the position of the object
    document.getElementById('scroll').style.top = currPos+"px";
    document.getElementById('scroll').innerHTML = event.wheelDelta + ":" + event.detail;
}




</script>
</head>
<body>
Scroll mouse wheel to move this DIV up and down.
    <div id="scroll">Dancing Div</div>

</body>
</html>