简单来说，我正在尝试使用 CSS 转换属性将一个大框(在浏览器处于全屏模式时使用)缩小为一个较小的框。该框正在正确缩放，但浏览器仍显示滚动条，就好像它没有缩放一样。我不想关闭溢出，我希望我遗漏了一些东西。
我的问题的 fiddle 。注意垂直滚动条: http://jsfiddle.net/adamlj/uvfhr8nw/4/
<html>
<head>
<style>
.scaleme {
background: red;
height: 2000px;
width: 4000px;
}
.scaler {
transform-origin: top left;
transform: scale(0.16666667);
}
</style>
</head>
<body>
<div class="scaler">
<div class="scaleme"></div>
</div>
</body>
</html>
最佳答案
transform保持原始元素不变。它只影响元素的呈现方式。
但原始元素保持不变，因此在文档流中占据相同的空间。因此，除非您调整元素的大小，否则滚动条不会消失。
如果您正在寻找调整元素大小及其在文档流中占用的空间的解决方案，请查看 this answer .
"use strict";var _createClass=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}();function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var zoomFactor=function(){function e(t){_classCallCheck(this,e),this.el=this.q(t,document),this.b(),this.u()}return _createClass(e,[{key:"q",value:function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.el).querySelector(e)}},{key:"b",value:function(){var e=this.el.innerHTML,t=document.createElement("z-1"),n=document.createElement("z-2"),i=document.createElement("z-3"),l=document.createElement("style");this.el.innerHTML="",this.el.appendChild(t),t.appendChild(n),n.appendChild(i),i.innerHTML=e,l.appendChild(document.createTextNode("z-1,z-2,z-3,zoom-factor{display:block}z-1,zoom-factor{position:relative;overflow:hidden}z-1,z-2{width:100%}z-1,z-2,z-3{color:#fff}z-1{float:left;overflow:hidden}z-2{position:absolute}z-3{transform-origin:left top;width:0}")),document.getElementsByTagName("head")[0].appendChild(l)}},{key:"v",value:function(){return this.q("input")?this.q("input").value:parseFloat(this.el.dataset.scale)||1}},{key:"u",value:function(){var e=this.v(),n=this.q("z-1"),i=this.q("z-2"),l=this.q("z-3");n.style=i.style=l.style="",i.style.width=n.clientWidth*e+"px",l.style.transform="scale("+e+")",n.style.height=l.clientHeight*e+"px"}}]),e}();new zoomFactor("zoom-factor");.scaleme {
background: red;
height: 2000px;
width: 4000px;
}<zoom-factor data-scale="0.16666667">
<div class="scaleme"></div>
</zoom-factor>将 CSS 放在 JS 中，通过 babel 运行它以使其与 es2015 兼容并缩小它。一旦你将该 js 放入你的页面，它会自动解析 <zoom-factor>元素根据其 data-scale .
关于html - 为什么我在缩小一个大框时继续出现滚动条？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53798994/