pc端网页缩放的方案探索

carol2014 / 2023-08-11 / 原文

最近领导给了个需求：一个web页面header和footer的部分不能随浏览器zoom in/out 改变样式及字体大小。

分析了需求和查阅相关资料后，写个demo，实现了整个页面不随ctrl+(+/-) 组合键或者ctrl+鼠标滚轮缩放的效果，对于浏览器工具/设置的缩放没有效果。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- 缩放比例仅在移动端有效，在pc端无效 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=3,minimum-scale=0.5" />
    <title>Document</title>
  </head>
  <body></body>
</html>

<html>
  <head> </head>
  <body style="font-size: 30px">
    <div class="header"><h1>测试</h1></div>
    <div class="content"><br />SCRIPT脚本控制页面不随ctrl+鼠标滚轮而缩放。<br /></div>
  </body>
  <script>
    let gloable_key = { ctrlDown: false };

    //禁止Ctrl + （+/-）组合
    //event.ctrlKey：键盘的Ctrl键      event.metaKey：mac上的Command
    document.addEventListener(
      "keydown",
      function (event) {
        if (event.ctrlKey === true || event.metaKey === true) {
          gloable_key["ctrlDown"] = true; //如果ctrl键按下，记录到变量
        }
        if ((event.ctrlKey === true || event.metaKey === true) && (event.which === 61 || event.which === 107 || event.which === 173 
　　　　　　　　|| event.which === 109 || event.which === 187 || event.which === 189)) {
          event.preventDefault(); //阻止默认缩放
        }
      },
      false
    );

    // 禁止Ctrl + 鼠标轮滑
    //DOMMouseScroll是火狐对鼠标轮滑的监听事件。mousewheel是Chrome，IE对鼠标轮滑的监听事件
    document.addEventListener(
      "DOMMouseScroll",
      function (event) {
        if ("ctrlDown" in gloable_key && gloable_key["ctrlDown"]) {
          event.preventDefault(); //阻止默认缩放
        }
      },
      { passive: false }
    );
    document.addEventListener(
      "mousewheel",
      function (event) {
        if ("ctrlDown" in gloable_key && gloable_key["ctrlDown"]) {
          event.preventDefault(); //阻止默认缩放
        }
      },
      { passive: false }
    );
  </script>
</html>

然而单个元素添加以上效果，该怎么做呢？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- 缩放比例仅在移动端有效，在pc端无效 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=3,minimum-scale=0.5" />
    <title>Document</title>
  </head>
  <body></body>
</html>

<html>
  <head> </head>
  <body style="font-size: 30px">
    <div class="header">
      <h1>测试</h1>
    </div>
    <div class="content"><br />SCRIPT脚本控制页面不随ctrl+鼠标滚轮而缩放。<br /></div>
  </body>
  <script>
    let gloable_key = { ctrlDown: false };
    let elem_header = document.querySelector(".header");

    //禁止Ctrl + （+/-）组合
    //event.ctrlKey：键盘的Ctrl键      event.metaKey：mac上的Command
    document.addEventListener(
      "keydown",
      function (event) {
        if (event.ctrlKey === true || event.metaKey === true) {
          gloable_key["ctrlDown"] = true; //如果ctrl键按下，记录到变量
        }
        if ((event.ctrlKey === true || event.metaKey === true) && (event.which === 61 || event.which === 107 || event.which === 173 || event.which === 109 || event.which === 187 || event.which === 189)) {
          event.preventDefault(); //阻止默认缩放
        }
      },
      false
    );

    // 禁止Ctrl + 鼠标轮滑
    //DOMMouseScroll是火狐对鼠标轮滑的监听事件。mousewheel是Chrome，IE对鼠标轮滑的监听事件
    elem_header.addEventListener(
      "DOMMouseScroll",
      function (event) {
        if ("ctrlDown" in gloable_key && gloable_key["ctrlDown"]) {
          event.preventDefault(); //阻止默认缩放
        }
      },
      { passive: false }
    );
    elem_header.addEventListener(
      "mousewheel",
      function (event) {
        if ("ctrlDown" in gloable_key && gloable_key["ctrlDown"]) {
          event.preventDefault(); //阻止默认缩放
        }
      },
      { passive: false }
    );
  </script>
</html>

效果就是鼠标放到header区域，不随ctrl+(+/-) 组合键或者ctrl+鼠标滚轮缩放，鼠标放到content区域，随意缩放，显然不是想要的效果。

依靠键盘事件似乎达不到控制区域的精细效果，header上绑定的键盘事件也不会在header上按下键盘按键触发键盘事件的效果。没思路了。

试试其它的解决方案，css的zoom和transform-scale

<html>
  <head> </head>
  <body>
    <div class="header" style="border: 1px silver solid; padding: 0.25rem; height: 300px; overflow-y: auto">
      <div class="content_scale" style="background-color: aqua">
        <h1>测试</h1>
        <h1>测试</h1>
        <h1>测试</h1>
        <h1>测试</h1>
        <h1>测试</h1>
        <h1>测试</h1>
        <h1>测试</h1>
      </div>
    </div>
    <div class="header" style="border: 1px silver solid; padding: 0.25rem; height: 300px; overflow-y: auto">
      <div class="content_zoom" style="background-color: bisque">
        <h1>测试</h1>
        <h1>测试</h1>
        <h1>测试</h1>
        <h1>测试</h1>
        <h1>测试</h1>
        <h1>测试</h1>
        <h1>测试</h1>
      </div>
    </div>
    <div style="border: 1px silver solid; padding: 0.25rem">
      <h1>对比</h1>
    </div>
  </body>
  <script>
    let gloabl_scale = 1.0;
    let elem_scale = document.querySelector(".content_scale");
    elem_scale.addEventListener("mousewheel", handleScale, { passive: false });
    elem_scale.addEventListener("DOMMouseScroll", handleScale, { passive: false });
    function handleScale(event) {
      //event.deltaY > 0 滚轮朝前滑动
      if (event.deltaY > 0) {
        gloabl_scale += 0.1;
        if (gloabl_scale > 2.0) gloabl_scale = 2.0;
        elem_scale.style.transform = "scale(" + gloabl_scale + ")";
        elem_scale.style.transformOrigin = "0 0";
      } else {
        gloabl_scale -= 0.1;
        if (gloabl_scale < 0.5) gloabl_scale = 0.5;
        elem_scale.style.transform = "scale(" + gloabl_scale + ")";
        elem_scale.style.transformOrigin = "0 0";
      }
    }

    let gloabl_zoom = 1.0;
    let elem_zoom = document.querySelector(".content_zoom");
    elem_zoom.addEventListener("mousewheel", handleZoom, { passive: false });
    elem_zoom.addEventListener("DOMMouseScroll", handleZoom, { passive: false });
    function handleZoom(event) {
      //event.deltaY > 0 滚轮朝前滑动 放大
      if (event.deltaY > 0) {
        gloabl_zoom += 0.1;
        if (gloabl_zoom > 2.0) gloabl_zoom = 2.0;
      } else {
        gloabl_zoom -= 0.1;
        if (gloabl_zoom < 0.5) gloabl_zoom = 0.5;
      }
      elem_zoom.style.zoom = gloabl_zoom;
    }
  </script>
</html>