この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>

Answer 2

は怒鳴るCSSを試してみてください。ここフィドルだあなた

ありがとうございました

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