transform放大元素后，父级元素不出现滚动条的解决方案

最新推荐文章于 2025-05-27 16:38:22 发布

hadardb

最新推荐文章于 2025-05-27 16:38:22 发布

阅读量8.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： script transform scale jQuery

本文链接：https://blog.youkuaiyun.com/qq_40299140/article/details/86306791

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何处理transform scale放大元素时，防止父级元素出现滚动条的解决方案。通过理解transform scale的工作原理，可以使用transform-origin调整放大中心，或者在外层添加div并利用transform matrix进行偏移来实现视觉上的放大效果。示例代码中展示了如何在点击按钮时，放大内部元素而不改变父元素的滚动条。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先讲一下自己对transform scale 的理解，transform scale 放大元素，元素本身的width与height不变，并不会影响页面布局，相当于是在元素上添加了一个放大镜。本质上是放大像素点，所以当放大图片时图片会出现模糊，这里也顺带提一下解决方案，当元素放大时去调用高清图片，不要一开始就加载大图，影响页面加载速度。

使用transform默认的作用中心是元素的中心点，通过 ransform-origin 调整，transform-origin:0 0;

如果有需求不能改变中心点，可以在外层嵌套一层div，放大时同时对div进行transform matrix 偏移操作，在视觉上形成同样的效果。

最后贴上demo代码，放大元素本身不放大，就在外层添加一个div控制它的宽高影响滚动条。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
       <script src="js/bootstrap.min.js"></script>
       <link href="css/bootstrap.min.css" rel="stylesheet" />
       <style>
           #btn{
               margin: 200px 200px;
               transform-origin:0 0;
           }
           #zoom-area{
               width: 1024px;
               height: 800px;
               background-color: #2B542C;
               position: relative;
               padding: 1px;
               overflow: scroll;

           }
           #area{
               border: 2px solid #761C19;
           }
       </style>
   </head>
   <body>
       <div id="zoom-area">
           <div id="area">
               <div id="btn" style="border:20px solid #000; background-color: #1E9FFF; width: 333px;height: 500px;line-height: 2;">啊你高啊啊阿斯顿</div>
           </div>

       </div>
       <div id="btn-big">放大</div>
       <script>
           var zoomTop=0
           var zoomLeft=0
           var size=1
           var w=$('#area').width()
           var h=$('#area').height()
           $('#btn-big').on('click',function(){
               size+=0.5
               if(size>1){
                   //需要把边框的宽度也算上
                   zoomTop=($('#btn').height()+parseInt($('#btn').css('border-width'))*2)*(size-1)
                   zoomLeft=($('#btn').width()+parseInt($('#btn').css('border-width'))*2)*(size-1)
                   $('#area').width(w+zoomLeft)
                   $('#area').height(h+zoomTop)
               }
               $('#btn').css({'transform':'scale('+size+','+size+')',
                               '-ms-transform':'scale('+size+','+size+')',
                               '-moz-transform':'scale('+size+','+size+')',
                               '-webkit-transform':'scale('+size+','+size+')'
                           })

       })
       </script>
   </body>
</html>