Question

是否可以仅在一侧隐藏元素的水平溢出：左侧还是右侧？像overflow-x-right:hidden;这样的东西。我对基于CSS和jquery的提示持开放态度。

Answer 1

除非另有说明，否则所有内容均从左侧开始。因此，如果您希望隐藏左侧的内容，请考虑制作元素position: absolute，并将其设置为right: 0。将其与overflow-x: hidden相结合，这应该可以实现您的目标。

Answer 2

如果CSS3是一个选项，“剪辑”绝对是你的解决方案。

http://www.css3.com/css-clip/

Answer 3

当您说水平时，我们只有一个侧栏，它位于容器的底部。因此，从技术上讲，没有左或右。对于垂直滚动，容器的direction属性或父项确定它是位于右侧还是左侧。

使用普通的CSS和普通的浏览器UI，你可以做到这一切。否则，您应该创建自己的控件和UI小部件。

Answer 4

这是您使用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。

进一步阅读：

“溢出-x：隐藏”只有一面？

4 个答案: