The appearance of elements in a random place expands the page-CodePudding

I have a function that craeates divs with a circle.

Now they are all created and appear at the beginning of the page and go further in order.

Next, I need each circle to appear in a random place. I did this but there is only one problem.

When the circle appears on the edge of the page, it expands and scrolling appears

How can I limit this so that the circles don't go off the edge of the page?

function createDiv(id, color) {
  let div = document.createElement('div');
  var currentTop = 0;
  var documentHeight = document.documentElement.clientHeight;
  var documentWidth = document.documentElement.clientWidth;
  div.setAttribute('class', id);
  if (color === undefined) {
    let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547'];
    div.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
  }
  else {
   div.style.backgroundColor = color; 
  }
  div.classList.add("circle");
  div.classList.add("animation");
  
  currentTop = Math.floor(Math.random() * documentHeight)   1;
   currentLeft = Math.floor(Math.random() * documentWidth)   1;
   
   div.style.top = currentTop   "px";
   div.style.left = currentLeft   "px";
  document.body.appendChild(div);
}
    
let i = 0;

const oneSecond = 1000;

setInterval(() => {
  i  = 1;
  createDiv(`circle${i}`)
}, oneSecond);

.circle {
  clip-path: circle(50%);
  height: 40px;
  width: 40px;
  margin: 20px;
  position: absolute;
}

CodePudding user response：

I think it comes from 2 things :

The height and width of the circle are not compensated when you get the random positions
The 20px margin should be compensated too

See here my version, if you have some questions I'll try to be more clear :)

var widthHeight = 40; // <-- circle width
var margin = 20; // <-- margin - is it necessary ?
var delta = widthHeight   margin;

function createDiv(id, color) {
  let div = document.createElement('div');
  var currentTop = 0;
  var documentHeight = document.documentElement.clientHeight;
  var documentWidth = document.documentElement.clientWidth;
  div.setAttribute('class', id);
  if (color === undefined) {
    let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547'];
    div.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
  }
  else {
   div.style.backgroundColor = color; 
  }
  div.classList.add("circle");
  div.classList.add("animation");
  
  // Get the random positions minus the delta
  currentTop = Math.floor(Math.random() * documentHeight) - delta;
  currentLeft = Math.floor(Math.random() * documentWidth) - delta;
  
  // Keep the positions between -20px and the current positions
  var limitedTop = Math.max(margin * -1, currentTop);
  var limitedLeft = Math.max(margin * -1, currentLeft);

  div.style.top = limitedTop   "px";
  div.style.left = limitedLeft   "px";
  document.body.appendChild(div);
}
    
let i = 0;

const oneSecond = 1000;

setInterval(() => {
  i  = 1;
  createDiv(`circle${i}`)
}, oneSecond);

.circle {
  clip-path: circle(50%);
  height: 40px;
  width: 40px;
  margin: 20px;
  position: absolute;
}