Skip to content

Instantly share code, notes, and snippets.

@AlexanderOMara

AlexanderOMara/index.html

Created August 9, 2016 20:26
Show Gist options
  • Save AlexanderOMara/1d09ee1dd6b1155ae710401205ef2268 to your computer and use it in GitHub Desktop.
Save AlexanderOMara/1d09ee1dd6b1155ae710401205ef2268 to your computer and use it in GitHub Desktop.
Download ZIP
Edge Wheel Delta X Inverted Test
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Edge Wheel Delta X Inverted Test</title>
<style>
body {
background: #CCCCCC;
}
.panel {
overflow: scroll;
width: 400px;
height: 400px;
border: 2px solid #333333;
margin: 0 auto;
}
.content {
width: 1000%;
height: 1000%;
background-color: #999999;
background-image:
linear-gradient(#CCCCCC 2px, transparent 2px, transparent 3px),
linear-gradient(90deg, #CCCCCC 2px, transparent 2px, transparent 3px),
linear-gradient(rgba(255, 255, 255, 0.33) 1px, transparent 1px, transparent 2px),
linear-gradient(90deg, rgba(255, 255, 255, 0.33) 1px, transparent 1px, transparent 2px);
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position: -1px -1px, -1px -1px, 0 0, 0 0;
}
#deltas {
position: fixed;
bottom: 0;
left: 0;
padding: 10px;
width: 300px;
height: 3em;
background: rgba(255, 255, 255, 0.5);
}
</style>
</head>
<body>
<div class="panel">
<div class="content"></div>
</div>
<div id="deltas">
</div>
<script>
(function() {
'use strict';
var deltas = document.getElementById('deltas');
window.addEventListener('wheel', function(e) {
deltas.innerHTML = 'deltaX: ' + e.deltaX + '\<br /\>' + 'deltaY: ' + e.deltaY;
});
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment