我想让overflow-x隐藏并且overflow-y可见答案

【问题标题】：I want to make overflow-x hidden and overflow-y visible我想让overflow-x隐藏并且overflow-y可见
【发布时间】：2021-09-01 07:36:03
【问题描述】：

我被这个问题困扰了很多天。我一直在努力实现的是这样的，

我有一个滑块 div 设置它的宽度和高度，在其中我有盒子并排坐着作为孩子。所以我希望隐藏滑块的水平溢出（超出滑块宽度的框）。这可以通过隐藏溢出-x 轻松实现。但问题是当我悬停一个框时，我想扩大它的宽度和高度并显示更多内容，我希望它们垂直溢出滑块。由于隐藏的溢出不起作用。他们也被隐藏了。而且我想扩展该框的宽度和高度而不推动它的兄弟姐妹。示例就像 Netflix 显示它的电影一样。当您将鼠标悬停时，它会展开并显示更多内容。

这是我迄今为止能够实现的目标

.wrapper {
  width: 80%;
  height: 8rem;
  border: 3px solid green;
  margin: 4rem auto;
}
.slider {
  display: flex;
  overflow-x: hidden;
}
.boxes {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.box-container {
  position: relative;
}
.box {
  width: 8rem;
  height: 8rem;
  background: purple;
  margin-right: 3px;
  transition: all 0.4s;
}
.box:hover {
  height: 20rem;
  width: 15rem;
}




<div class="wrapper">
      <div class="slider">
        <div class="boxes">
          <div class="box-container">
            <div class="box"></div>
          </div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
          <div class="box"></div>
        </div>
      </div>
    </div>

这就是我想要完成的https://demo.vodlix.com/

【问题讨论】：

标签： html css reactjs slider overflow

【解决方案1】：

我想你想这样做：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: orange;
  width: 200px;
  height: 50px;
  border: 1px dotted black;
  overflow-x: hidden;
  overflow-y: scroll;
}
</style>
</head>
<body>
<div>Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla </div>

</body>
</html>

如果你想这样做，那么你必须使用这些：

overflow-x:hidden;
overfloy-y:scroll;

【讨论】：

这不是我真正想做的。我希望 y 轴上的溢出是可见的，而不需要推动它周围的内容。滚动不是我想要的。

【解决方案2】：

这个没有引导程序的完整滑块

你可能需要这样的东西

没有 bootstrap 也可以工作。

如果工作，试试这个，喝点咖啡！ ;D

CSS

.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;

    -ms-box-orient: horizontal;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
}

.row { 
    -webkit-flex-direction: row; 
    flex-direction: row;
}

.flex-item {
    border-radius: 0.5em;
    padding: 5px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: table;

    line-height: 50px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}

.mamOfmom{
    height: auto;
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
}

使用 class="mamOfmom" 作为其中的主要元素我做了 overflow-x: scroll 使其横向滚动。

和 class="flex-container row" 使 子元素侧向弯曲。

并使用 class="flex-item" 作为 child/Image。

HTML

<div class="mamOfmom">
    <div class="flex-container row">
            <img class="flex-item" src="https://picsum.photos/id/237/200/300">

            <img class="flex-item" src="https://picsum.photos/seed/picsum/200/300">
        
            <img class="flex-item" src="https://picsum.photos/200/300?grayscale">
        
            <img class="flex-item" src="https://picsum.photos/id/237/200/300">
    
            <img class="flex-item" src="https://picsum.photos/seed/picsum/200/300">
    
            <img class="flex-item" src="https://picsum.photos/200/300?grayscale">

            <img class="flex-item" src="https://picsum.photos/id/237/200/300">

            <img class="flex-item" src="https://picsum.photos/seed/picsum/200/300">
        
            <img class="flex-item" src="https://picsum.photos/200/300?grayscale">
        
            <img class="flex-item" src="https://picsum.photos/id/237/200/300">
    
            <img class="flex-item" src="https://picsum.photos/seed/picsum/200/300">
    
            <img class="flex-item" src="https://picsum.photos/200/300?grayscale">

    </div>
</div>

<h3>If Me not move its work</h3>

【讨论】：