随机将类添加到两个div中

Question

我有一个红黑两行网格，比例是50/50%，高度为100%。我有一个脚本可以在页面加载时随机显示左右两边的内容。但是，我对这个双列网格的代码进行了一些更改，从相对位置和浮动到固定和绝对位置。这是由于移动设备的滚动行为，这样做效果更好。

下面的代码在使用浮动时工作得很好，它会添加一个左侧或右侧的类，使红色区域选择一个随机的方向，并且黑色区域会自动跟随，因为它们是相对于彼此的。使用绝对和固定位置后，就必须要添加左侧或右侧的类才能正常工作。请问如何添加这个类，使红色在左边，黑色在右边？

// Random red & black //

window.addEventListener('load', function() {
  // This is a ternary operator, which is just a shorthand way to 
  // do an if/else statement. This basically says, if the random number
  // is less than .5, assign "left" to the scenario variable.
  // if it is greater (or equal to), assign "right" to the variable. 
  var scenario = Math.random() < .5 ? "left" : "right";

  document.querySelector(".red", ).classList.add("" + scenario);
});

.left {
  left: 0;
}

.right {
  right: 0;
}

.red,
.black {
  width: 50%;
  height: 100%;
}

.black {
  position: absolute;
  background-color: black;
}

.red {
  position: fixed;
  background-color: red;
}

<div class="red"></div>
<div class="black"></div>

- KP83

Answer 1

这是您的解决方案：

// Random red & black //

window.addEventListener('load', function() {
// This is a ternary operator, which is just a shorthand way to 
// do an if/else statement. This basically says, if the random number
// is less than .5, assign "left" to the scenario variable.
// if it is greater (or equal to), assign "right" to the variable.
var scenario = Math.random() < .5 ? "left" : "right";
var scenario2 = scenario == "left" ? "right" : "left";

document.querySelector(".red", ).classList.add("" + scenario);
document.querySelector(".black", ).classList.add("" + scenario2);

});

.left { left: 0;}
.right { right: 0;}

.red,
.black {
  width: 50%;
  height: 100%;
}

.black {
  position: absolute;
  background-color: black;
}

.red {
  position: fixed;
  background-color: red;
}

<div class="red"></div>
<div class="black"></div>

- SwapNeil

Answer 2

在这种情况下，您应该避免使用绝对定位，因为您不希望出现重叠（这不适合此处）。您可以替换CSS和JavaScript代码，只需应用单个类进行反转。演示：

// Random red & black
window.addEventListener('load', function() {
  if (Math.random() < .5)
    document.body.classList.add("reversed");
});

body {
  margin: 0;
  /* set height to be minimum of 100% of screen hieght */
  min-height: 100vh;
}

body > div {
  width: 50%;
}

.red {
  background-color: red;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
}

.black {
  background-color: black;
  margin-left: 50%;
  min-height: 100vh;
}

body.reversed > .red {
  left: 50%;
}

body.reversed > .black {
  margin-left: 0;
}

<div class="red"></div>
<div class="black"></div>

- Vadim Ovchinnikov

---

@Pallum 为什么要使用CSS Grid布局，为什么需要2D？如果你只需要颜色行，那么flexbox就可以满足你的需求。顺便说一下，CSS Grid布局也适用于IE10+\Edge，你只需要使用旧语法即可。 - Vadim Ovchinnikov

@Pallum 但说实话，我会在这里使用flexbox，因为它应该可以在任何地方使用（除了一些非常过时的东西）。 - Vadim Ovchinnikov

@Pallum 好的，我已经更改了我的 CSS 以适应你的需求。但是在这里仍然不应该使用绝对定位来放置 black 块。 - Vadim Ovchinnikov

超级棒的东西！不知道你是否知道如何避免这个问题：在iOS Safari中，地址栏会在滚动时隐藏，这很好，但是当向下滚动时，红色侧边栏会跳起来并关闭间隙，并且不保持高度为100％。这是一个众所周知的问题。 - KP83

@Pallum 如果这个问题只出现在iOS Safari上，我认为你可以不用JavaScript提出单独的问题。 - Vadim Ovchinnikov

Answer 3

这更像是一种hack而不是答案。

您可以将padding-left:50%添加到.black，并为.red赋予更高的z-index值以弥补position设置中的差异。

最后，我添加了body {overflow:hidden} - 在这种情况下，body恰好是容器 - 以整理事物。

// Random red & black //

window.addEventListener('load', function() {
  // This is a ternary operator, which is just a shorthand way to 
  // do an if/else statement. This basically says, if the random number
  // is less than .5, assign "left" to the scenario variable.
  // if it is greater (or equal to), assign "right" to the variable. 
  var scenario = Math.random() < .5 ? "left" : "right";

  document.querySelector(".red", ).classList.add("" + scenario);
});

body {
  margin: 0 auto;
  padding: 0;
  overflow: hidden
}

.left {
  left: 0;
}

.right {
  right: 0;
}

.red,
.black {
  width: 50%;
  height: 100%;
}

.black {
  position: absolute;
  background-color: black;
  padding-left: 50%
}

.red {
  position: fixed;
  background-color: red;
  z-index: 2
}

<div class="red"></div>
<div class="black"></div>

- I haz kode