title: Change element scale by scroll (zoom by scroll)
body: <p>As recommended by other users, I post a new question in order to ask for help with a scaling issue, instead of trying to complete the already existing one :
  <a href="https://stackoverflow.com/questions/30481026/css-transform-scale-scrolling-issue/32113644#32113644">similar question</a>.
  I am trying to set up a zoom by scroll on a specific element on a page (an image).
  At first I used transform : scale(number); But it seems to mess up the overflow preventing to fully scroll the image (a part of the image on the left and the top is hidden).
  I couldn't find a way to be able to fully scroll the image AND set the transform origin on the mouse position.
  I am currently trying to find a workaround by putting the image inside a div container and changing the container width/height. It seems to be working pretty good, the only issue is with setting the offset of the div in order to match the mouse position (what setting transform-origin was doing pertty well)...</p>
  
  <p>Here is my code with both methods to zoom in... The mouseWheel js is from some random sites which had a demo on it, I don't think it's the latest version.
  As you can see, I can zoom in and out, but then I can't fully scroll the objects, I have fixed it a bit by putting the objects inside an other div, but it messes the position up so it does not sound like a solution...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container1 {
    position: fixed;
    width: 300px;
    height: 200px;
    border: 1px solid #000000;
    left: 0px;
    top: 0px;
    margin-left: 10px;
    margin-top: 10px;
    overflow: auto;
    display: block;
    text-align: center;
  }
  #object1 {
    position: absolute;
    width: 100px;
    height: 100px;
    display: inline-block;
    background-color: rgba(255, 0, 255, 0.45);
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 25px;
  }
  #container2 {
    position: fixed;
    width: 300px;
    height: 200px;
    border: 1px solid #000000;
    left: 0px;
    top: 0px;
    margin-left: 330px;
    margin-top: 10px;
    overflow: auto;
    display: block;
    text-align: center;
  }
  #object2 {
    position: absolute;
    width: 100px;
    height: 100px;
    display: inline-block;
    background-color: rgba(0, 0, 255, 0.45);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 25px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://owlcarousel.owlgraphic.com/assets/vendors/jquery.mousewheel.min.js"&gt;&lt;/script&gt;
  &lt;div id="container1"&gt;
  
    &lt;div id="object1"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div id="container2"&gt;
  
    &lt;div id="object2"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
    var scale = 1;
    var object2 = document.getElementById("object2");
    $('#object2').on("mousewheel", function(event) {
      scale += event.deltaY &lt; 1 ? -0.3 : 0.3;
      scale = scale &lt; 1 ? 1 : scale;
      scale = scale &gt; 5 ? 5 : scale;
      object2.style.transform = "scale(" + scale + ")";
      object2.style.transformOrigin = event.offsetX + "px " + event.offsetY + "px";
      event.preventDefault();
    });
    var scale2 = 1;
    var object1 = document.getElementById("object1");
    $('#object1').on("mousewheel", function(event) {
      scale2 += event.deltaY &lt; 1 ? -0.3 : 0.3;
      scale2 = scale2 &lt; 1 ? 1 : scale2;
      scale2 = scale2 &gt; 5 ? 5 : scale2;
      object1.style.width = (100 * scale2) + "px";
      object1.style.height = (100 * scale2) + "px";
      event.preventDefault();
    });
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is the same thing with a container div, just so you can see how it messes up the position :</p>
  
  
  
  <pre class="lang-css prettyprint-override"><code>#container1 {
    position: fixed;
    width: 300px;
    height: 200px;
    border: 1px solid #000000;
    left: 0px;
    top: 0px;
    margin-left: 10px;
    margin-top: 10px;
    overflow: auto;
    display: block;
    text-align: center;
  }
  #objectContainer {
    position: relative;
    width: 100px;
    height: 100px;
    margin: auto;
    bottom: 0;
    right: 0;
  }
  #object1 {
    position: absolute;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    background-color: rgba(255, 0, 255, 0.45);
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 25px;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://owlcarousel.owlgraphic.com/assets/vendors/jquery.mousewheel.min.js"&gt;&lt;/script&gt;
  &lt;div id="container1"&gt;
    &lt;div id="objectContainer"&gt;
      &lt;div id="object1"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
    var scale2 = 1;
    var container1 = document.getElementById("objectContainer");
    $('#object1').on("mousewheel", function(event) {
      scale2 += event.deltaY &lt; 1 ? -0.3 : 0.3;
      scale2 = scale2 &lt; 1 ? 1 : scale2;
      scale2 = scale2 &gt; 5 ? 5 : scale2;
      container1.style.width = (100 * scale2) + "px";
      container1.style.height = (100 * scale2) + "px";
      event.preventDefault();
    });
  &lt;/script&gt;
  </code></pre>