Joe Joe - 1 month ago 6
CSS Question

How to prevent this css shape to scroll left and right

I would like to keep this shape so it is responsive and keeps the same direction, and that it can still scroll down the page. The problem is that because of its size it scrolls left and right, which I wish to avoid.

If I set

overflow: hidden;
to its parent element (body), it causes all other content to vanish in the bottom when it reaches it.

Is there a way to prevent the page to scroll left and right, to "cut" the extra part? Thank you

Here's the 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

You can just set overflow-x: hidden;, so scrolling in y direction will be nevertheless possible:

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>