約束與流星項目的窗口

我想要做的是讓圓形在整個屏幕上垂直和水平滑動。我想定位水平滑動管的事情是「隨機」放置， but without needing to scroll.約束與流星項目的窗口

然而，有時水平線將超越區域，使得整個頁面做大，並要求我to scroll down to see them.

這裏是我的代碼，在流星/ 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>

來源

2016-01-21 Ben Rock

容器高度和寬度和溢出

height:100vh; 
width:100vw; 
overflow:auto;

來源

2016-01-22 02:28:44

約束與流星項目的窗口

回答

相關問題