Question

简单来说，我正在尝试使用CSS transform属性将一个大框（当浏览器处于全屏模式时使用）缩小到一个较小的框。该框可以正确缩放，但是浏览器仍在显示滚动条，好像它没有缩放一样。我不想关闭溢出，希望我丢失了一些东西。

摆弄我的问题。注意垂直滚动条： 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>

Answer 1

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元素。

缩小大方框时，为什么仍继续显示滚动条？

1 个答案: