使用 Meteor 项目约束窗口

constrain windows with meteor project

本文关键字：窗口 约束 项目 Meteor 使用      更新时间：2023-09-26

我想做的是让圆圈在屏幕上滑动，无论是垂直还是水平。我想将水平滑动的管子东西"随机"放置，但无需滚动。

但是，有时水平线会超出该区域，使整个页面变大，并需要我向下滚动才能看到它们。

这是我的代码，在Meteor/Jquery/html/css中：

if (Meteor.isClient) {
  // counter starts at 0
  Session.setDefault('counter', 0);
  Template.hello.helpers({});
  Template.hello.events({})
function getColor(){return "rgb("+Math.floor(Math.random() * 256)+","+ Math.floor(Math.random() * 256)+","+  Math.floor(Math.random() * 256)+")"; }
var allVars = -1;
function doIT()
{
  setInterval(function() {
  //get unique id by count.
   allVars++;
   var holdName = "Circle"+ allVars;
   var i =holdName;
   //create the item
    $div = $("<p>", {id:i, name:"circle"});
    //check which direction to send it
    if(allVars%2!=0){  
     var number =  Math.floor(Math.random() * ($( "#HOLD" ).width()));
    $div.css({top: -100, position:'absolute',"background-color":getColor(),width:(10+ Math.floor(Math.random() * 100))});
     $div.animate({'marginLeft':number});
      $("#HOLD").append($div);
     var a = $( window ).height()+100;
     $("#"+i).animate({height: a},5000);
   }
   else{
      $div.css({left: -150, position:'absolute',"background-color":getColor(),height:(10+ Math.floor(Math.random() * 100))});
    var n = $("#HOLD").css('width').indexOf("p");
    var it = $("#HOLD").css('width').substring(0,n);
    var number = Math.floor(Math.random() * (parseInt(it)));
     $("#HOLD").append($div);
     $("p").text(number);
    
     $div.animate({'top':number});
     var a = $( "#HOLD" ).width()+200;
     $("#"+i).animate({width: a},6000);
   }
  }, 4000);
}
 Meteor.startup(function () { 
 $("#HOLD").css({width:'100vw', height:'100vh'});
 alert($("#HOLD").css('width'));
  doIT();});
}
if (Meteor.isServer) {
 
}
/*
*/
[name="circle"] {
    width: 50px;
    height: 50px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px; 
    color: red;
    text-align: center;
}
body
{
   background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
  <title>Circles</title>
</head>
<body>
  {{> hello}}
</body>
<template name="hello">
<div id="HOLD">
<p> _ </p>
 <iframe width="0" height="315" src="https://www.youtube.com/embed/B4qdpiad_Q0?&autoplay=1&loop=1&playlist=B4qdpiad_Q0" frameborder="0" allowfullscreen></iframe>
</div>
</template>

容器高度和宽度以及溢出

height:100vh;
width:100vw;
overflow:auto;
相关文章：