CSS Scale and Transform causing overlaps

问题: In HTML page I am trying to achieve zoom functionality using CSS transform scale property. Inside the HTML page, I am having more div elements and all are placed using abso...

问题:

In HTML page I am trying to achieve zoom functionality using CSS transform scale property. Inside the HTML page, I am having more div elements and all are placed using absolute position technique. Then I apply the scale property to each div and I was able to see like zoom but all div positions gots collapsed each other. So how to avoid collapse and maintain the gap between each other after applied scaling.

Please suggest me how to stop overlapping and how to calculate left and top position of each element accordingly to scale property.

var zoomScale = 1;

$(document).ready(function(){
  
  $("#zoomin").click(function(){
    if(zoomScale >=4 ) return;
    zoomScale = zoomScale +1;
    dispStatus();
    applyZoomIn();
  });

  function applyZoomIn(){
    $(".zoomable").each(function(index){
      var left = $(this).position().left;
      var top = $(this).position().top;
      var newLeft = left*zoomScale +"px";
      var newTop = top*zoomScale +"px";
      $(this).css('transform',' scale('+zoomScale+','+zoomScale+')')
    });
  }

  function dispStatus(){
    $("#displayStatus").text("Current Zoom Scale : "+zoomScale);
  }
  
  dispStatus();
  
});
#container{
     width:500px;
     height:500px;
     border:1px solid red;
     position:relative;
     overflow:auto;
}
.zoomable{
  background-color:lightblue;       
  border:1px solid red;
  width:100px;
  height:100px;
  position:absolute;
  transform-origin: top left;      
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<button id="zoomin"> Zoom In</button>
<div id="displayStatus"></div>
<br/><br/>
<div id="container">
   <div class="zoomable">First Div</div>
   <div class="zoomable" style="left:105px">Second Div</div>
</div>

JSFiddle Link


回答1:

You can add .zoomable div into one more parent (called .inner-container) and add zoom functionality to it. So that .container div will not get zoomed and zoomable div will maintain position.

See the Snippet below:

var zoomScale = 1;
$(document).ready(function(){
	 $("#zoomin").click(function(){
    if(zoomScale >=4 ) return;
    zoomScale = zoomScale +1;
    dispStatus();
    applyZoomIn();
  });

  function applyZoomIn(){
      $(".inner-container").css('transform',' scale('+zoomScale+','+zoomScale+')');
  }

 
  function dispStatus(){
   $("#displayStatus").text("Current Zoom Scale : "+zoomScale);
  }

  dispStatus();

});
    
    .zoomable{
      background-color:lightblue;       
      width:100px;
      height:100px;
      position:absolute;
      border:1px solid red;
    }
    #container{
    width:500px;
    height:500px;
    border:1px solid red;
    position:relative;
    overflow:auto;
    }
    .inner-container{
      transform-origin: top left; 
    }
   
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="zoomin"> Zoom In</button>

<div id="displayStatus"></div>
<br/><br/>

<div id="container">
  <div class="inner-container">
    <div class="zoomable">First Div
    </div>
    <div class="zoomable" style="left:105px">Second Div
    </div>
  </div>
</div>
<br/><br/>

You can also test it here

  • 发表于 2019-01-13 14:29
  • 阅读 ( 284 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除