Javascript DOM WheelEvent deltaY Property enlarge element

Introduction

Scroll inside a DIV to make it bigger/smaller:

View in separate window 

<!DOCTYPE html>
<html>
<body>
<p>Resize the DIV element by scrolling inside it:</p>

<div onwheel="myFunction(event)" 
     style="width:100px;height:100px;background-color:red">
</div>// w  w w  .j ava 2s .  c  om

<script>
function myFunction(event) {
  var y = event.deltaY;
  var currentSize = event.target.style.width;
  if (y > 0) {
    newSize = parseInt(currentSize) + 10;
  } else {
    newSize = parseInt(currentSize) - 10;
  }
  event.target.style.width = newSize + "px";
  event.target.style.height = newSize + "px";
}
</script>

</body>
</html>



PreviousNext

Related