supercala

Posted: **Fri Oct 02, 2015 5:58 pm**

This works in Firefox 41 and now IE 11 as well.
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>

boxanim.css

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%;
	}

supercala

Javascript mousewheel scrolling a box for fun

Javascript mousewheel scrolling a box for fun