JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
Some Text
<div id="fixed">
Test Element
</div>
</div>

CSS

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

#wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  background: red;
}

#fixed {
  position: fixed;
  left: 2%;
  bottom: 2%;
  height: 100px;
  width: 100px;
  background: blue;
}

JavaScript

$(function(){
addHandlers();
});

		function addHandlers() {
			window.onmousewheel = function (e) {
      	zoom(e.wheelDelta > 0);
			};
		}

		currentZoom = 1;    
		function zoom(zoomIn) {
			var el = $('#wrapper');
			var newZoom = zoomIn ? currentZoom * 1.1 : currentZoom / 1.1;
			newZoom = Math.round(newZoom * 100) / 100;
			if (newZoom >= 1 && newZoom < 4.5) {
				currentZoom = newZoom;
				el.css('zoom', newZoom);
			}
		}