对于div里面内容过大根据长度或者宽度进行适配，然后可以滚轮缩放的功能
Posted pengfei25
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了对于div里面内容过大根据长度或者宽度进行适配，然后可以滚轮缩放的功能相关的知识，希望对你有一定的参考价值。
在做3000的项目中，因为页面的svg很大，但是做的只是适配电脑，打开肯定是看不全的，要看全就必须进行滚动，可是客户提出了将页面放在电视机上面，用电视输入网址直接访问，这样问题就来了，电视上怎么进行滚动呢
所以新增需求
1、页面根据不同尺寸的设置进行适配
2、确保页面内容可以全部查看完整
3、可以进行滚轮滚动缩放
实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css"> html,body{ width:100%; height:100%; overflow:hidden; padding:0; margin:0; } #big{ overflow:auto; width:100%; height:100% } #content{ width:3000px; height:2000px; background-color:pink; display:flex; justify-content:center; align-items:center; transform-origin:0 0; } #content>span{ display:flex; justify-content:center; align-items:center; width:500px; height:500px; color:white; background: rgba(0,0,0,0.5); } </style> </head> <body> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> window.onload=function(){ initEvent() //计算是宽度优先的还是高度优先的 initScale() } function initScale(){ var initScale = 1; if($(window).width()/$("#content").width()<$(window).height()/$("#content").height()){ initScale=$(window).width()/$("#content").width(); }else{ initScale=$(window).height()/$("#content").height(); } console.log(initScale) $("#content").css("transform","scale("+initScale+")") } function initEvent(){ //滚轮效果 var params={} $(‘body‘).on(‘mousewheel‘,function(e){ params.zoomVal+=event.wheelDelta/1200; var o=e.target; if (params.zoomVal >= 0.2) { $("#content").css("transform","scale("+params.zoomVal+")") } else { params.zoomVal=0.2;//不让其一直无限缩小 $("#content").css("transform","scale("+params.zoomVal+")") return false; } }) $(window).on("resize",function(){ initScale() }) } </script> <div id="big"> <div id="content" class="big-image"> <span>测试根据屏幕尺寸进行缩放div</span> </div> </div> </body> </html>
效果图
以上是关于对于div里面内容过大根据长度或者宽度进行适配，然后可以滚轮缩放的功能的主要内容，如果未能解决你的问题，请参考以下文章
怎么让div的宽度不变，高度自适应内容的高度，新手求举例，谢谢
外层div自适应里面内容的宽度，div里面分为2边自适应中间固定，里面有多宽，外层div就有多宽