JSFiddle - React, Tailwind, and code Playground

by georgoboy

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div id="mainDiv" class="mainDiv viewport" width="400" height="300">
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" id="cephImage" class="cephImage" alt="Cephalogram">
</div>

CSS

.viewport {
  margin: 50px auto;
  width: 600px;
  height: 600px;
  overflow: auto; /* Set to hidden to remove scrollbars */
}

.viewport > *{
  display: block; 
}

JavaScript

var mainDiv = document.getElementById('mainDiv');

// Zoom On Scroll
var image = document.getElementById('cephImage');
image.onload  = createImage();

var actualImageWidth;
var actualImageHeight;

function createImage()
{
    actualImageWidth = image.width;
    actualImageHeight = image.height;
    console.log("Actual Image Width and Height: ", [actualImageWidth, actualImageHeight]);
}

var zoomScrollX;
var zoomScrollY;

var zoomFactor = 1;
image.addEventListener('wheel', function(event)
{
  xPos = event.pageX - $('#cephImage').offset().left;
  yPos = event.pageY - $('#cephImage').offset().top;
  
  if(event.deltaY < 0)
  { 
    if(zoomFactor <=4)
    {
      console.log('zoomFactor Value : ', zoomFactor);
      zoomFactor += 1; 
      console.log('Zoom Factor: ', zoomFactor); 
      

      console.log("(Zoom ScrollX, Zoom ScrollY)", [zoomScrollX,zoomScrollY]); 
    
      checkZoom();
      
      image.scrollTo(zoomScrollX, zoomScrollY);

    }

    else{
      console.log('Reached Max Zoom Level');
    }

  }

  else
  { 
    if(zoomFactor>=2)
    {
      console.log('zoomFactor Value: ', zoomFactor);
      zoomFactor -= 1;  
      console.log('Zoom Factor: ', zoomFactor);
      console.log('Zoom out...') 
      
      zoomScrollX = xPos * zoomFactor;
      zoomScrollY = yPos * zoomFactor;
       
      checkZoom(); 
      
      
      image.scrollTo(zoomScrollX, zoomScrollY);

    }
    else{
      console.log('Reached Minimum Zoom Level');
    }
  }
});


// Function CheckZoom Level.
function checkZoom()
{
    console.log('Zoom Level: ', zoomFactor);
    // console.log('[x,y]: ', [xPos,yPos]);
    console.log("actual Image Width: ", actualImageWidth);
    console.log("actual Image Height: ", actualImageHeight);

    var imageWidth  = actualImageWidth * zoomFactor;
    var imageHeight = actualImageHeight * zoomFactor;

    image.width = imageWidth;
    image.height = imageHeight;

    console.log('image Width: ', image.width);
    console.log('Image Height:...