3

i have a template with 3 section that .rightand.left sections are sticky to top and have 100vh height. and may become overflowed , that should be scrolled separately ( overflow-y:auto ).
my problem begins where i have elements ( .right span:after ) with position:absolute and left:-100% for example, that cause an horizontal overflow. and i want that element to be visible. but overflow-x: visible does not work properly.

how to scroll .right section whiles the hovered text is showing

Given the questions that have somewhat like my problem, including these questions :

i know the cause of my problem but i don't found acceptable answer. i tried to write some codes to show my problem. and thank you for guiding me.

I prefer to be answered with css but js is acceptable too.

update :

i try to do that with js but when overflow property doesn't be set for right the scrollTop not working.

*,*:after,*:before{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
main{
  background: lightgray;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  min-width: 500px;
  max-width: 80vw;
  margin: 0 auto;
}
section{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .5rem;
  gap: 2rem;
}
.left{
  grid-column: 1 / 4;
  background: gold;
}
.right{
  grid-column: 10 / 13;
  background: lightblue;
}
.middle{
  grid-column: 4 / 10;
  grid-row-start: 1;
}
.middle span{
  padding: 5rem 0;
  width: 100%;
  text-align: center;
}
span{
  padding: 5px 0;
  border: 1px dashed;
  position: relative;
}

.left, .right{
  height: 100vh;
  position: sticky; /* i want to be sticky*/
  top: 0;
  overflow-y: auto;
}


.right{
  overflow-x: visible; /* this not work */
}

.right span:after{       /* i want it to be visible complately*/
  content:"hovered";
  position: absolute;
  height: 20px;
  background: red;
  left: -100%;
}
<main>
  <section class="left">
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
  </section>
  <section class="right">
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
  </section>
  <section class="middle">
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
  </section>
</main>
Ahmad MRF
  • 1,346
  • 1
  • 6
  • 16

2 Answers2

1

Maybe not the Ideal solution. But you can try to use a overlay div simulating the spacing of the underlying layout. Something like this:

*,*:after,*:before{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
main{
  background: trasparent;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  min-width: 500px;
  max-width: 80vw;
  margin: 0 auto;
  position:relative;
}
.overlay {
  position: fixed;
  top:0;
  z-index:9999;
  width
:100%;
}
.overlay .right{
  grid-column: 4 / 13;
  background-clip: content-box;
  border-width:0;
  padding:0;
  /*this calculation is based on the original 6/12 columns for the main grid area*/
  padding-left:max(calc(500px*0.5),calc(80vw*0.5));
  box-sizing: border-box;
}
section{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .5rem;
  gap: 2rem;
}
.left{
  grid-column: 1 / 4;
  background: gold;
}
.right{
  grid-column: 10 / 13;
  background: lightblue;
}
.middle{
    background: lightgray;
  position:relative;
  grid-column: 4 / 10;
  grid-row-start: 1;
}
.middle span{
  padding: 5rem 0;
  width: 100%;
  text-align: center;
}
span{
  padding: 5px 0;
  border: 1px dashed;
  position: relative;
}

.left, .right, right{
  height: 100vh;
  position: sticky; /* i want to be sticky*/
  top: 0;
  overflow-y: auto;
}

.right{
  position:sticky;
  overflow-x: visible; /* this not work */
  overflow-y: auto; /* this not work */
  z-index:999;
  background-clip: border-box;
}

.right .inner{
  position:fixed;
  height: 100%;
  overflow:auto;
  background-color:#f0f;
  border: 5px solid blue;
  display:flex;
  height:100%;
  flex-direction: column;
  align-items: center;
}
.right .inner span{
  position:relative;  
}

.right .inner span:after{       /* i want it to be visible complately*/
  content:"hoveraaaa";
  position: absolute;
  height: 20px;
  background: red;
  margin-left: -200px;
  z-index:999;
}

.right span{
  position:relative;
  top:0;
  left:-10px;
}
.right span:after{       /* i want it to be visible complately*/
  content:"hover";
  position: absolute;
  height: 20px;
  background: red;
  left: -150%;
  z-index:999;
}
<div class='overlay'>
<main>
 <section class="right">
   <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
 </section>
</main>
</div>
<main>
  <section class="left">
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
  </section>    
<!--   <section class="right">
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
  </section> -->
  
  <section class="middle">
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
  </section>
</main>
Tiago Nobrega
  • 505
  • 4
  • 8
0

As per the answer https://stackoverflow.com/a/6433475/15273968 it's not possible to have one side overflowing and other with scrollbar.

We can use workaround like this: 

*,*:after,*:before{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
main{
  background: lightgray;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  width: 500px;
  margin: 0 auto;
}
section{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .5rem;
  gap: 2rem;
}
.left{
  grid-column: 1 / 4;
  background: gold;
}
.right{
  grid-column: 8 / 13;
  background:linear-gradient(to right, lightgray 40%, lightblue 40%);
}
.middle{
  grid-column: 4 / 8;
  grid-row-start: 1;
  align-items: end;
}
.middle span{
  padding: 5rem 0;
}
span{
  padding: 5px 0;
  border: 1px dashed;
  position: relative;
}

.left, .right{
  height: 100vh;
  position: sticky; /* i want to be sticky*/
  top: 0;
  overflow-y: auto;
}


.right{
  align-items: end;
  padding-right: 1rem;
}

.right span:nth-child(3n+1):after{       /* i want it to be visible complately*/
  content:"hovered";
  position: absolute;
  height: 20px;
  background: red;
  left: -100%;
}
<main>
  <section class="left">
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
  </section>
  <section class="right">
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
      <span>some text</span>
  </section>
  <section class="middle">
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
    <span>some text</span>
  </section>
</main>

Use media queries to make it scalable.

the Hutt
  • 16,980
  • 2
  • 14
  • 44