时间戳

首页 > 解决方案 > 使用定位属性时避免溢出的 CSS 技巧

css - 使用定位属性时避免溢出的 CSS 技巧

问题描述

此问题发生在我的自定义可滑动列表元素中。 在此处输入图像描述 滚动时写入的日志是scrollLeft列表的。

当我从头开始实现一个滚动元素及其滚动条和一个列表元素时，所有元素overflow都是hidden. 该列表是弹性框，它的一个子对象通过更改它们的leftortranslateX属性来滑动（在上面的演示中，我只是使用translateX了但是两个 + 更改right产生了相同的结果）。并且改变left孩子的属性会导致这种溢出。

我已经找到解决方案来避免当有一个向右滑动的孩子时奇怪的水平滚动（请注意，y轴上的列表溢出仅在left属性为正时发生），但他们需要更多代码和其中一些导致另一个问题，例如 DOM 树中的事件处理。所以我想找到一个很好的轻巧的技巧来解决这个溢出问题。

请注意，将position孩子的属性设置为absolute不起作用。

为了演示这种溢出的发生，我做了一个主干演示，显示在属性上设置正值left会导致溢出（请参阅出现水平滚动条）。 

* {
  position: relative;
  flex-direction: column;
}
body {
  height: 90vh;
}
#view-scroller {
  display: flex;
}
#swipable-list-view {
  height: 100%;
  flex-shrink: 1;
  display: flex;
}
[swiped] {
  left: 20%;
}
<div id="view-scroller">
  <div id="swipable-list-view">
    <div>Item</div>
    <div swiped>Swiped Item</div>
    <div>Item</div>
  </div>
<div>

标签： css

解决方案

添加overflow: hiddenon#swipable-list-view可以阻止具有该属性[swiped]的任何内容溢出其容器。

我还建议使用来移动[swiped]元素，因为这更适合动画过渡。

[swiped] {
    transform: translateX(20%);
    flex: 1;
    width: 100%;
}

推荐阅读