当前位置: 动力学知识库 > 问答 > 编程问答 >

html - 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>

网友答案:

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>
网友答案:

Try bellow CSS

position: fixed; 
overflow-y: scroll;
top: 0; right: 0; bottom: 0; left: 0;
分享给朋友:
您可能感兴趣的文章:
随机阅读: