最近领导给了个需求：一个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>
然而单个元素添加以上效果，该怎么做呢？
试试其它的解决方案，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>
以下三图分别是无缩放、最小、最大的结果
使用zoom缩放较符合需求，缩放区域缩小后无滚动条，证明是zoom改变了元素的大小，而scale的滚动条始终都在。
然而firefox浏览器到今天仍然不支持zoom，只得放弃此种方案