javascript - 如何完全显示溢出元素。 'overflow-x : visible ' 不工作

Question

我有一个包含 3 个 section 的模板，.right 和 .left 部分粘在顶部并且有 100vh高度。并且可能会溢出，应该单独滚动(overflow-y:auto)。
我的问题开始于我有元素( .right span:after )与 position:absolute 和 left:-100% 例如，这导致水平溢出。我希望该元素可见。但是 overflow-x: visible 不能正常工作。

如何在显示 hovered 文本时滚动 .right 部分

---

鉴于问题有点像我的问题，包括这些问题:

• CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
• overflow-y:visible not working when overflow-x:hidden is present
• Overflow y hidden breaks overflow x visible
  和...

我知道我的问题的原因，但我没有找到可接受的答案。我试着写一些代码来显示我的问题。并感谢您指导我。

我更喜欢用 css 来回答，但 js 也是可以接受的。

更新:

我尝试用 js 做到这一点，但是当 overflow 属性没有为 right 设置时 scrollTop 不工作。

*,*: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>

Answer 1

也许不是理想的解决方案。但是你可以尝试使用一个overlay div来模拟底层布局的间距。像这样:

*,*: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>