jQuery “溢出-x：隐藏”仅一侧？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8953971/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
"overflow-x:hidden" one side only?
提问by Marc
Is it possible to hide the horizontal overflow of an element on one side only: left or right? Something like overflow-x-right:hidden;. I am open to css and jquery based tips.
是否可以仅在一侧隐藏元素的水平溢出：左侧或右侧？类似的东西overflow-x-right:hidden;。我对基于 css 和 jquery 的技巧持开放态度。
回答by Lg102
All content starts on the left, unless otherwise defined. So if you want content on the left to be hidden, consider making the element position: absolute, and setting it to right: 0. Combine that with overflow-x: hidden, which should accomplish your goal.
除非另有定义，否则所有内容都从左侧开始。因此，如果您希望隐藏左侧的内容，请考虑制作元素position: absolute，并将其设置为right: 0。将其与 结合起来overflow-x: hidden，这应该可以实现您的目标。
回答by kroe
If CSS3 is a option, "clip" is definitely your solution.
如果 CSS3 是一个选项，“剪辑”绝对是您的解决方案。
回答by Nathan Arthur
This is how you could do it using clip-path, which replaced the deprecated clipproperty:
这就是您可以使用 来执行此操作的方法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>Note that, as of December 2017, browser support isn't very good.
请注意，截至 2017 年 12 月，浏览器支持不是很好。
Further reading:
进一步阅读：
回答by Saeed Neamati
When you say Horizontal, then we only have oneside bar, and that is at the bottom of the container. So, technically there is no leftor rightfor that. For verticalscrolls, the directionattribute of the container, or parents, determine whether it's located on right, or on left.
当你说Horizontal 时，我们只有一个侧栏，那就是在容器的底部。所以，从技术上讲，没有左或右。对于垂直滚动，direction容器或父项的属性确定它是位于右侧还是左侧。
That's all you can do, with normal CSS, and ordinary browser UI. Otherwise, you should create your own controls and UI widgets.
这就是您可以使用普通 CSS 和普通浏览器 UI 做的全部事情。否则，您应该创建自己的控件和 UI 小部件。
