如何溢出-x:可见，而溢出-y:滚动 [英] How to overflow-x: visible while overflow-y: scroll

问题描述

MDN 在谈到溢出时指出:

MDN, while talking about overflow, states:

MDN注意:将一个轴设置为可见(默认)，而将另一个轴设置为其他值会导致可见行为为自动.

MDN Note: Setting one axis to visible (the default) while setting the other to a different value results in visible behaving as auto.

所以在以下情况下...

So in the following context...

overflow-y: scroll/auto
overflow-x: visible

... overflow-x: visible的行为类似于overflow-x: auto，而这反过来又表现为overflow-x: hidden.请注意，在下面的演示中，橙色正方形的一半隐藏在Z平面上.

...overflow-x: visible behaves as overflow-x: auto, which in turn seems to behave as overflow-x: hidden. Notice in the demo below that half of the orange square is hidden on the Z plane.

::-webkit-scrollbar {
  display: none;
}

#grid {
  width: 600px;
  height: 150px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: black;
}

.column {
  position: relative;
  box-sizing: border-box;
  border: solid red 3px;
}

.column:nth-child(1) {
  overflow-y: scroll; /* auto also does not work */
  overflow-x: visible;
  /*
  ** overflow: visible;
  **
  ** uncomment this to allow
  ** overflow on the x plane...
  */
}

.overflow {
  height: 75px;
  box-sizing: border-box;
  border: solid green 3px;
}

#square {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%);
  background: orange;
}

<div id='grid'>
  <div class='column'>
    <div class='overflow'></div>
    <div class='overflow'></div>
    <div class='overflow'></div>
    <div id='square'></div>
  </div>
  <div class='column'></div>
</div>

如何在使用overflow-y: scroll的同时使overflow-x真正成为visible?

How can I make overflow-x truly visible while using overflow-y: scroll?

这就是我想做的...

This is what I would like to do...

推荐答案

@oldboy可以吗?

@oldboy Is that all right with you？

::-webkit-scrollbar {
  display: none;
}

#grid {
  width: 600px;
  height: 150px;
  background: black;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 150px;
}

.column {
  box-sizing: border-box;
  border: solid red 3px;
  height: 100%;
}

.column:nth-child(1) {
  /*
  ** overflow: visible;
  **
  ** uncomment this to allow
  ** overflow on the x plane...
  */
}

.overflow {
  width: calc(100% - 30px);
  height: 75px;
  box-sizing: border-box;
  border: solid green 3px;
}

#square {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(-100%, -50%);
  background: orange;
}
.wrap {
  width: calc(100% + 30px);
  position: relative;
  overflow-y: scroll; /* auto also does not work */
  overflow-x: visible;
  height: 100%;
}

<div id='grid'>
  <div class='column'>
    <div class="wrap">
      <div class='overflow'></div>
      <div class='overflow'></div>
      <div class='overflow'></div>
      <div id='square'></div>
    </div>
  </div>
  <div class='column'></div>
</div>

这篇关于如何溢出-x:可见，而溢出-y:滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！