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

Question

我想保持这种形状,使其响应并保持相同的方向,并且它仍然可以向下滚动页面.问题是,由于它的大小,它左右滚动,我希望避免.

如果我设置overflow: hidden;为其父元素(正文),则会导致所有其他内容在到达底部时消失.

有没有办法阻止页面左右滚动,"削减"额外的部分？谢谢

这是小提琴: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>