jquery - "overflow-x:hidden"只有一侧？

Question

是否可以仅在一侧隐藏元素的水平溢出:左侧或右侧？类似于 overflow-x-right:hidden;。我愿意接受基于 css 和 jquery 的技巧。

Answer 1

这是使用 clip-path 实现的方法，它取代了已弃用的 clip 属性:

.outer {
  background-color: rgba(0,0,255,.5);
  width: 100px;
  height: 100px;
  margin: 100px;
  clip-path: inset( -100vw -100vw -100vw 0 );
}

.inner {
  background-color: rgba(255,0,0,.5);
  width: 200px;
  height: 80px;
  position: relative;
  top: 10px;
  left: -50px;
}

<div class="outer">
  <div class="inner"></div>
</div>

请注意，截至 2017 年 12 月，browser support isn't very good .

进一步阅读:

• MDN: clip-path
• CSS-Tricks: clip-path