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

Question

我需要将滚动条从div2移走

|分区1 | |
|-------------------- | |
| |SCRL| |
| |SCRL| div3 |
| |SCRL| |
| div2 |SCRL| |
| |SCRL| |
| |SCRL| |
| |SCRL| |

像这样进入整个界面的外部。

|分区1 | ||SCRL|
|------------------------| ||SCRL|
| | ||SCRL|
| | div3 ||SCRL|
| | ||SCRL|
|分区2 | ||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/

非常感谢! :)

Answer 1

只需对顶部和右侧元素使用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>

P.S: 99px height 和 top 用于demo。将所有 99px 替换为 480px 或您需要的任何内容。