Question

我需要从div2移动滚动条

| div1 | |
|--------------------- | |
| |SCRL| |
| |SCRL| div3 |
| |SCRL| |
| div2 |SCRL| |
| |SCRL| |
| |SCRL| |
| |SCRL| |

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

| div1 | ||SCRL|
|----------------------| ||SCRL|
| | ||SCRL|
| | div3 ||SCRL|
| | ||SCRL|
| div2 | ||SCRL|
| | ||SCRL|
| | ||SCRL|
| | ||SCRL|

当我们scoll新的滚动条时，div2将正常移动。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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进行演示。将所有99px替换为480px或您需要的任何内容。

Answer 2

我不确定您是否打算将内容保持在固定的高度？如果不是，您可以将容器的高度设置为100％/将其完全删除，您的元素将正确滚动。

你也必须使用相对/绝对定位。

https://fiddle.jshell.net/sep1u4jf/3/

    position:absolute;
    margin-top:200px;
    width:70%;
    height: 100%;
    border: 1px solid purple;

希望它有所帮助！

仅使用页面滚动条

2 个答案: