Question

上开发了一些东西

<div id="clock">
<div id="clockBack">
</div><!--clockBack-->


<!--hands-->
<div id="minHand">

</div><!--minHand-->
<div id="hourHand">

</div><!--hourHand-->    
<div id="secHand">

</div><!--secHand-->  

</div>

//for css
*{
  margin:0;
  padding:0;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
h1,h2,h3,h4,h5,h6,p{margin-bottom:10px;}
ol,ul,dl{list-style-position:inside;}


body{
  background-color:yellow;
}
#clock{
  position:relative;  
}
#clockBack{
  background-image: url('http://gdurl.com/nMzq');
  background-size:100% 100%;  
  background-position:0,0;
  background-repeat: no-repeat;  
  z-index:-1;
  display:block;
  margin:auto;
  width:100vw;
  height:100vh;
  position:relative;
}
#minHand{
  background-image: url('http://gdurl.com/kSWj'); 
  background-repeat: no-repeat; 
  width:12%;
  height:12%;
  position: absolute;
  z-index:2;
  top:50%;
  left:50%;
  transform-origin:left top;
  -ms-transform-origin:left top; /* IE 9 */
  -webkit-transform-origin: left top; /* Safari and Chrome */
  -moz-transform-origin:left top; /* Firefox */
  -o-transform-origin:left top; /* Opera */  
}
#secHand{
  background-image: url('http://gdurl.com/28tL'); 
  background-repeat: no-repeat; 
  width:18%;
  height:18%;
  position: absolute;
  z-index:3;
  top:50%;
  left:50%;
  transform-origin:left top;
  -ms-transform-origin:left top; /* IE 9 */
  -webkit-transform-origin: left top; /* Safari and Chrome */
  -moz-transform-origin:left top; /* Firefox */
  -o-transform-origin:left top; /* Opera */    
}

#hourHand{
  background-image: url('http://gdurl.com/wpXp'); 
  background-repeat: no-repeat;   
  width:13%;
  height:13%;
  position: absolute;
  z-index:1;
  top:50%;
  left:50%;
  transform-origin:left top;
  -ms-transform-origin:left top; /* IE 9 */
  -webkit-transform-origin: left top; /* Safari and Chrome */
  -moz-transform-origin:left top; /* Firefox */
  -o-transform-origin:left top; /* Opera */    
}

//for js
function ClockHand(handName){
    var _handName=handName;
    this.getName = function() {
      return _handName;
    };

}

ClockHand.prototype={
  angleCalc:function(){
    var d =new Date();
    var hour=d.getHours() % 12 ;
    var min=d.getMinutes();
    var sec=d.getSeconds();
    var angle=0;
    switch(this.getName()){
        case "hourHand":
            angle=(hour+min/60)/12*2*Math.PI-Math.PI/2;
        break;
        case "minHand":
             angle=min*2*Math.PI/60-Math.PI/2;
        break;
        case "secHand":
             angle=sec*2*Math.PI/60-Math.PI/2;
        break;
    }
    return angle;
  },
  rotateHand: function(angle){
      var e;
      switch(this.getName()){          
          case "hourHand":
              e = document.getElementById("hourHand");
          break;
          case "minHand":
              e = document.getElementById("minHand");
          break;
          case "secHand":
              e = document.getElementById("secHand");
          break;
      }
      if(e) {
          e.style.webkitTransform = 'rotate('+angle+'rad)'; 
          e.style.mozTransform    = 'rotate('+angle+'rad)'; 
          e.style.msTransform     = 'rotate('+angle+'rad)'; 
          e.style.oTransform      = 'rotate('+angle+'rad)'; 
          e.style.transform       = 'rotate('+angle+'rad)'; 
       }
  }
}

function Clock(){
    this.clockHourHand=new ClockHand("hourHand");
    this.clockMinHand=new ClockHand("minHand");
    this.clockSecHand=new ClockHand("secHand"); 
    this.updateTimerId=-1;
    this.updateClock= function(){
       var hAngle=this.clockHourHand.angleCalc();
       var mAngle=this.clockMinHand.angleCalc();
       var sAngle=this.clockSecHand.angleCalc();
       this.clockHourHand.rotateHand(hAngle);
       this.clockSecHand.rotateHand(sAngle);
       this.clockMinHand.rotateHand(mAngle);     
    };
   this.createTimer=function(){
      window.clearInterval(this.updateTimerId);
      this.updateTimerId=window.setInterval(this.updateClock.bind(this),100);
    };
}

(function(){
    var c=new Clock();
    c.createTimer();
})();

这是一个时钟，但是当它的第二只手转向指向右下方时，整个画布变得更大：立即显示滚动条尺寸变化。大约20秒后，滚动条的大小将恢复为原始大小。

我使用chrome 59.0.3071.115进行测试。这种滚动条行为真的让我感到困惑，因为它会导致时钟突然移动并使观众难以理解。

Answer 1

由于div＃secHand的高度而出现滚动条。要解决此问题，请将以下内容添加到CSS中：

#clock {
    overflow: hidden;
}

html时钟的突然滚动条显示

1 个答案: