Question

我需要溢出-x：在image的第一部分滚动，并且在我image的第2部分上溢出比div更大的div。

所以我的问题是当我添加溢出时：父div可见，它内部的所有溢出都是可见的。我想溢出：可见，但保持溢出-x：在父div上滚动。它甚至可能吗？

HTML：

<div id="wrapper">
    <div class="content">
      <div class="child">
        <button onclick="action(this)" class="triggerBtn">Click</button>
      </div>
    </div>
    <div class="content">
      <div class="child">
        <button onclick="action(this)" class="triggerBtn">Click</button>
      </div>
    </div>
    <div class="content">
      <div class="child">
        <button onclick="action(this)" class="triggerBtn">Click</button>
      </div>
    </div>
    <div class="content">
      <div class="child">
        <button onclick="action(this)" class="triggerBtn">Click</button>
      </div>
    </div>
    <div class="content">
      <div class="child">
        <button onclick="action(this)" class="triggerBtn">Click</button>
      </div>
    </div>
</div>

CSS：

#wrapper {
    height: 200px;
    width: 400px;
    white-space:nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    margin:auto;
    background-color: rgb(240,240,240);
    position: relative;
    z-index: 1;
}
.content {
    width: 200px;
    height: 100%;
    overflow-x: hidden;
    display: inline-block;
    position: relative;
    z-index: 100;
    background-color: rgb(200,200,200);
}

.child {
    width: 200px;
    height: 50%;
    position: absolute;
    left: 0;
    top: 0;
    /* transform: translateX(50%); */
    background-color: #bada55;
    border-radius: 5px;
    z-index: 200;
    transition: all .15s ease-in-out;
    text-align: center;
}

div.child.active {
    width: 400px;
    left: -50%;
    background-color: #111
}

一堆JS：

window.action = function(el) {
  var parent = el.parentNode;
  if(parent.classList.contains('active')) {
    parent.classList.remove("active");
  } else {
    parent.className += " active";
  }
};

Answer 1

快速解决方法是在您的子选择器上使用.parent { overflow: visible; } .child { overflow: hidden !important; }，如下所示：

!important

>只是告诉系统使用样式而不是继承父级样式。您还可以使用直接子选择器<button type="button" (click)="openModel()">Open Modal</button> <div #myModel class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title ">Title</h5> <button type="button" class="close" (click)="closeModel()"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> </div> </div> </div>。

只使部分子元素溢出：可见

1 个答案: