css - 溢出-x 隐藏和溢出-y 可见

Question

我正在构建一个轮播，我希望容器隐藏溢出-x 并且溢出-y 可见。当项目悬停时，应用了一个变换：缩放（），我希望它们从容器溢出，但只在 y 轴上.

我尝试将容器设置为 overflow-x: hidden 并将子级设置为 overflow-y: visible 但这不起作用。

:root {
  --item-margin: 5px;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  position: relative;
  width: 80vw;
  margin-top: 60px;
  overflow-x: hidden;
}

.wrapper {
  height: 90%;
  display: flex;
  position: relative;
  left: calc(-20% - 5px);
  transition: .5s ease all;
  overflow-y: visible;
}

.left-arrow,
.right-arrow {
  display: flex;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: white;
  width: 50px;
  height: 50px;
  background: #ED4956;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

.left-arrow {
  left: 2%;
  top: 50%;
}

.right-arrow {
  left: 98%;
  top: 50%;
}

.child {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  height: 250px;
  width: 20%;
  font-weight: bold;
  font-size: 4rem;
  transition: .4s ease transform;
}

.child {
  margin-right: var(--item-margin);
}

.child:hover {
  transform: scale(1.5);
}

.child1 {
  background: green;
}

.child2 {
  background: blue;
}

.child3 {
  background: yellow;
}

.child4 {
  background: navy;
}

.child5 {
  background: red;
}

.child6 {
  background: pink;
}

.child7 {
  background: grey;
}

.child8 {
  background: brown;
}

.child9 {
  background: #ff80ed;
}

@media (max-width: 1400px) {
  .child {
    width: calc(25% - var(--item-margin));
  }
  .wrapper {
    left: -25%;
  }
}

<div class="container">
  <div class="wrapper">
    <div class="child child1">1</div>
    <div class="child child2">2</div>
    <div class="child child3">3</div>
    <div class="child child4">4</div>
    <div class="child child5">5</div>
    <div class="child child6">6</div>
    <div class="child child7">7</div>
    <div class="child child8">8</div>
    <div class="child child9">9</div>
  </div>
  <div class="left-arrow"> &larr; </div>
  <div class="right-arrow"> &rarr; </div>
</div>

标签： css

Answer 1

你只需要给出.container一个高度，例如：100vh.

---

因为孩子的顶部被切断了我建议使用padding-top: 60px而不是margin-top: 60px。

由于高度变化，箭头位置错误。为了调整这一点，我使用了一个不同的top值：孩子身高的一半加上容器填充顶部（125px + 60px）。

因为在这个例子.wrapper中不需要position: relative我删除它。也许在您的项目中，箭头功能是必要的......

工作示例：（在“整页”模式下观看以在没有滚动条的情况下观看）

:root {
  --item-margin: 5px;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  position: relative;
  width: 80vw;
  height: 100vh;
  padding-top: 60px;
  overflow-x: hidden;
}

.wrapper {
  height: 90%;
  display: flex;
  left: calc(-20% - 5px);
  transition: .5s ease all;
  overflow-y: visible;
}

.left-arrow,
.right-arrow {
  display: flex;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: white;
  width: 50px;
  height: 50px;
  background: #ED4956;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 185px;
}

.left-arrow {
  left: 2%;
}

.right-arrow {
  left: 98%;
}

.child {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  height: 250px;
  width: 20%;
  font-weight: bold;
  font-size: 4rem;
  transition: .4s ease transform;
}

.child {
  margin-right: var(--item-margin);
}

.child:hover {
  transform: scale(1.5);
}

.child1 {
  background: green;
}

.child2 {
  background: blue;
}

.child3 {
  background: yellow;
}

.child4 {
  background: navy;
}

.child5 {
  background: red;
}

.child6 {
  background: pink;
}

.child7 {
  background: grey;
}

.child8 {
  background: brown;
}

.child9 {
  background: #ff80ed;
}

@media (max-width: 1400px) {
  .child {
    width: calc(25% - var(--item-margin));
  }
  .wrapper {
    left: -25%;
  }
}

<div class="container">
  <div class="wrapper">
    <div class="child child1">1</div>
    <div class="child child2">2</div>
    <div class="child child3">3</div>
    <div class="child child4">4</div>
    <div class="child child5">5</div>
    <div class="child child6">6</div>
    <div class="child child7">7</div>
    <div class="child child8">8</div>
    <div class="child child9">9</div>
  </div>
  <div class="left-arrow"> &larr; </div>
  <div class="right-arrow"> &rarr; </div>
</div>

---

因为箭头仍然被切断，所以您可以添加一个额外的容器（此处.parent）并添加height,padding-top并添加overflow-x到它（而不是添加到容器中）。

工作示例：（在“整页”模式下观看以在没有滚动条的情况下查看）

:root {
  --item-margin: 5px;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  position: relative;
  width: 80vw;
}

.parent {
  height: 100vh;
  padding-top: 60px;
  overflow-x: hidden;
}

.wrapper {
  height: 90%;
  display: flex;
  left: calc(-20% - 5px);
  transition: .5s ease all;
  overflow: visible;
}

.left-arrow,
.right-arrow {
  display: flex;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: white;
  width: 50px;
  height: 50px;
  background: #ED4956;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 185px;
}

.left-arrow {
  left: 2%;
}

.right-arrow {
  left: 98%;
}

.child {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  height: 250px;
  width: 20%;
  font-weight: bold;
  font-size: 4rem;
  transition: .4s ease transform;
}

.child {
  margin-right: var(--item-margin);
}

.child:hover {
  transform: scale(1.5);
}

.child1 {
  background: green;
}

.child2 {
  background: blue;
}

.child3 {
  background: yellow;
}

.child4 {
  background: navy;
}

.child5 {
  background: red;
}

.child6 {
  background: pink;
}

.child7 {
  background: grey;
}

.child8 {
  background: brown;
}

.child9 {
  background: #ff80ed;
}

@media (max-width: 1400px) {
  .child {
    width: calc(25% - var(--item-margin));
  }
  .wrapper {
    left: -25%;
  }
}

<div class="container">
  <div class="parent">
    <div class="wrapper">
      <div class="child child1">1</div>
      <div class="child child2">2</div>
      <div class="child child3">3</div>
      <div class="child child4">4</div>
      <div class="child child5">5</div>
      <div class="child child6">6</div>
      <div class="child child7">7</div>
      <div class="child child8">8</div>
      <div class="child child9">9</div>
    </div>
  </div>
  <div class="left-arrow"> &larr; </div>
  <div class="right-arrow"> &rarr; </div>
</div>