javascript - CSS HTML 视差在 3 列上滚动 - 桌面

Question

我有 3 列定义为左、中和右。我试图让它工作，所以这些列不会从屏幕上消失，并且滚动条可以滚动到每个列高度的末尾。

这是一些测试代码：

* {
  box-sizing: border-box;
}

body {
  padding: 30px;
  margin: 0px;
}

.left {
  position: relative;
  padding: 20px;
  width: 20%;
  float: left;
  height: 1000px;
  margin-right: 1%;
  border: 2px solid;
}

.middle {
  position: relative;
  padding: 20px;
  width: 49%;
  float: left;
  margin-right: 1%;
  border: 2px solid;
  height: 2000px;
}

.right {
  position: relative;
  padding: 20px;
  width: 29%;
  float: left;
  border: 2px solid;
  height: 1500px;
}

div:after {
  position: absolute;
  content: 'end';
  bottom: 10px;
  left: 10px;
}

<div class="left">left</div>
<div class="middle">midle</div>
<div class="right">right</div>

标签： javascripthtmljquerycss