I queried 'wheelDelta' in event as an (if) as an object node for ie.
I made a full screen DIV that senses the mousewheel event and positive or negative event.details.
I calculated the current window size and reduced it by the wheelbox width so it wouldn't scroll and move past the edge of the doc.
fun stuff. maybe I can accelerate it, and also incorporate different areas with zoom and color changes etc. This would be a fun breakout game mod in javascript.
example 10-02-2015
http://www.supercala.net/sites/js_examples/boxanim/
index.php
Code: Select all
<html>
<head>
<link type="text/css" href="boxanim.css" rel="stylesheet" />
</head>
<body id="body">
<div id="fullarea"></div>
<div id="wheelbox">wheelbox</div>
<div id="debug">debug area</div>
</body>
</html>
<script>
var _body=document.getElementById('body');
var fullarea=document.getElementById('fullarea');
var wheelbox=document.getElementById('wheelbox');
var debug=document.getElementById('debug');
fullarea.addEventListener("DOMMouseScroll",movebox,false);
fullarea.addEventListener("mousewheel",movebox,false);
//
function movebox(event)
{
var posX=wheelbox.offsetLeft;
var totW=_body.offsetWidth;
var boxW=wheelbox.offsetWidth;
var dist=20;
var newPosL=posX-dist;
var newPosR=posX+dist;
//ff
var d=event.detail;
//ie
if('wheelDelta' in event)
{
d=-event.wheelDelta;//negative (-) wheelData as ie and ff return opposite data
}
debug.innerHTML=d+":"+totW;
//
if(d>0 && newPosR<totW-boxW)
{
wheelbox.style.left=newPosR+"px";
}
else if(d<0 && newPosL>0)
{
wheelbox.style.left=newPosL+"px";
}
}
</script>Code: Select all
body
{
text-align:center;
background-color:#AAAAAA;
}
#main
{
width:1000px;
background-color:#CCCCCC;
}
#fullarea
{
z-index:1;
position:absolute;
width:100%;
height:100%;
display:block;
background-color:#00FF00;
top:0px;
left:0px;
}
#wheelbox
{
z-index:2;
position:absolute;
width:300px;
height:300px;
background-color:#FF0000;
color:#FFFFFF;
top:100px;
left:0px;
}
#debug
{
z-index:3;
position:absolute;
top:500px;
background-color:#FFFF00;
height:24px;
width:100%;
}