javascript - 使用页面滚动条仅滚动特定元素

我需要把滚动条从div2移走
| div1 | |
|--------------------- | |
| |SCRL| |
| |SCRL| div3 |
| |SCRL| |
| div2 |SCRL| |
| |SCRL| |
| |SCRL| |
| |SCRL| |
像这样进入整个界面。
| div1 | ||SCRL|
|----------------------| ||SCRL|
| | ||SCRL|
| | div3 ||SCRL|
| | ||SCRL|
| div2 | ||SCRL|
| | ||SCRL|
| | ||SCRL|
| | ||SCRL|
当我们打开新的滚动条时，div2将正常移动。

.parent {
  border: 1px solid blue;
  margin:0px;
}
.div3{
  float:right;
  height:480px;
  width:28%;
  border:1px solid green;
}
.div1 {
  position:fixed;
  width:70%;
  height:200px;
  border: 1px solid red;
}
.div2{
  position:fixed;
  margin-top:200px;
  width:70%;
  height: 280px;
  border: 1px solid purple;
}

<div class="parent">
  <div class="div3">div 3</div>
  <div class="div1">div 1</div>
  <div class="div2"style="overflow-y: scroll">
    div2 <br> div2 <br>
    div2 <br> div2 <br>
    div2 <br> div2 <br>
    div2 <br> div2 <br>
    div2 <br> div2 <br>
    div2 <br> div2 <br>
    div2 <br> div2 <br>
    div2 <br> div2 <br>
    div2 <br> div2 <br>
  </div>
</div>

https://fiddle.jshell.net/sep1u4jf/
非常感谢！:)

最佳答案

只需对顶部和右侧元素使用position:fixed。

html, body{height:100%; margin:0;}

/* LAYOUT */
#top{
  position: fixed; z-index:1;
  left: 0; top: 0;
  width: 70%; height: 99px;
  background: #0ff;
}
#right{
  position: fixed; z-index:1;
  right: 0; top: 0;
  width: 30%; height: 100vh;
  background: #0bf;
}
#bottom{
  position: relative;
  overflow-y: auto;
  top: 99px;
  width: 70%; min-height: calc(100vh - 99px);
  background: #f0b;
}

<div class="parent">

  <div id="top">top fixed</div>
  <div id="right">right fixed</div>

  <div id="bottom">
    <p style="height:1200px; border:4px dashed #000; margin:0;"></p>
  </div>

</div>

附：我用了99pxheight和top来演示。将所有99px替换为480px或您需要的任何内容。