gnase gnase - 6 months ago 7
CSS Question

Scroll only specific element with page scrollbar

I need to move the scrolling bar from div2

| div1 | |


|--------------------- | |


| |SCRL| |


| |SCRL| div3 |


| |SCRL| |


| div2 |SCRL| |


| |SCRL| |


| |SCRL| |


| |SCRL| |


into outside to the whole interface like this.

| div1 | ||SCRL|


|----------------------| ||SCRL|


| | ||SCRL|


| | div3 ||SCRL|


| | ||SCRL|


| div2 | ||SCRL|


| | ||SCRL|


| | ||SCRL|


| | ||SCRL|


And when we scoll the new scroll bar, div2 will be shifted as normal.



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

many thanks! :)

Answer

Simply use position:fixed for both your top and right elements.

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: I used 99px height and top for demo. Replace all 99px with 480px or whatever you need.

Comments