进行什么

Question

我已经阅读了有关如何解决此问题的所有建议，但无论我做什么，我的网站仍然允许用户水平滚动。我已经隐藏了水平滚动条，但是使用箭头键或鼠标滚轮仍然可以让用户滚动。我尝试在overflow:hidden上分配html个别元素。似乎没什么用。

HTML：

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
        <div id="shapes">
                <div id="design-shape"></div>   
                <div id="contact-shape"></div>  

       </div>   
</body>

CSS：

html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
position: relative;
vertical-align: baseline;
overflow-x: hidden;
}

#design-shape {
 background: none repeat scroll 0 0 #e98e82;
 position: absolute;
 transform:rotate(-45deg);
 -ms-transform:rotate(-45deg);
 -webkit-transform:rotate(-45deg);
 height: 1040px;
 top: 1200px;
 left:50%;
 width: 5000px;
 margin-left: -2500px;
 z-index: 6;
}

#contact-shape {
 background: none repeat scroll 0 0 #333333;
 position: absolute;
 transform:rotate(-45deg);
 -ms-transform:rotate(-45deg);
 -webkit-transform:rotate(-45deg);
 height: 800px;
 top: 1960px;
 left:50%;
 width: 5000px;
 margin-left: -2500px;
 z-index: 17;
 }

Answer 1

有两个类（如下所示）有width: 5000px;和margin-left: -2500px。删除/更改它应该为您解决问题。

#design-shape {
 background: none repeat scroll 0 0 #e98e82;
 position: absolute;
 transform:rotate(-45deg);
 -ms-transform:rotate(-45deg);
 -webkit-transform:rotate(-45deg);
 height: 1040px;
 top: 1200px;
 left:50%;
 width: 5000px;
 margin-left: -2500px;
     z-index: 6;
 }

 #contact-shape {
 background: none repeat scroll 0 0 #333333;
 position: absolute;
 transform:rotate(-45deg);
 -ms-transform:rotate(-45deg);
 -webkit-transform:rotate(-45deg);
 height: 800px;
 top: 1960px;
 left:50%;
 width: 5000px;
 margin-left: -2500px;
 z-index: 17;
 }

编辑：

将position: relative;添加到形状样式应该有效。

#shapes {
overflow-x: hidden;
position: relative;
}

Answer 2

进行什么

在Chrome中，您可以横向滚动，这会显示您不想显示的内容。这是尽管没有水平滚动条。

原因是延伸到侧面的形状是绝对定位的，而它们的父#shapes不是相对或绝对定位的，因此它无法捕捉它们。要解决此问题，我们需要绝对定位#shapes，并将position:relative设置为#shapes的父级#page添加一些小巧的位以确保一切都是定位正确，我们很高兴。

代码

CSS：

#page {
    position:relative;
}

#shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

溢出：隐藏在Chrome中并不起作用

HTML：

CSS：

2 个答案:

进行什么

代码

CSS：