如何防止这个 css 形状左右滚动

Question

我想保留此形状，以便它能够响应并保持相同的方向，并且它仍然可以向下滚动页面。问题是由于它的大小，它会左右滚动，我希望避免这种情况。

如果我将 overflow: hidden; 设置为其父元素（body），它会导致所有其他内容在到达它时消失在底部。

有没有办法防止页面左右滚动到"cut"额外的部分？谢谢

这是 fiddle：https://jsfiddle.net/oytvt0p7/

  #angled-shape { 
    width: 3000px;
    height: 800px;
    background-color: lightgrey;
    margin-top: 50px;
    margin-left: -1000px;
    position: absolute;
    z-index: -1;
    overflow: hidden;

    -ms-transform: rotate(-30deg); /* IE 9 */
    -webkit-transform: rotate(-30deg); /* Safari */
    transform: rotate(-30deg); /* Standard syntax */
}

<div id="angled-shape"></div>

Answer 1

您可以只设置overflow-x: hidden;，这样仍然可以在y方向滚动：

body {
  overflow-x: hidden;
}

#angled-shape {
  width: 3000px;
  height: 800px;
  background-color: lightgrey;
  margin-top: 50px;
  margin-left: -1000px;
  position: absolute;
  z-index: -1;
  overflow: hidden;
  -ms-transform: rotate(-30deg);
  /* IE 9 */
  -webkit-transform: rotate(-30deg);
  /* Safari */
  transform: rotate(-30deg);
  /* Standard syntax */
}

<div id="angled-shape"></div>

Answer 2

试试下面的方法 CSS

position: fixed; 
overflow-y: scroll;
top: 0; right: 0; bottom: 0; left: 0;

如何防止这个 css 形状左右滚动

How to prevent this css shape to scroll left and right

html

css

css-shapes