双滚动条

Question

我的 JSFIDDLE 对我的图片产生了视差效果。 问题是我在结果中有两个滚动条。 如何只为我的所有内容提供一个滚动条？

HTML：

<div id="intro">
<p>Sed uelit, sed quia...</p>
</div>

<div id="text">
<h1>Hello</h1>
</div>
<div id="wrapper">
    <section id="frame1">
        <div class="back">
        </div>
    </section>


        <section id="frame7">
        <div class="back">

        </div>
    </section>

</div>

Answer 1

第二个滚动条显示是因为#wrapper上的默认框模型行为及其3px边框。要解决此问题，您可以将box-sizing:border-box;分配给#wrapper，边框将限制在#wrapper内。 https://jsfiddle.net/qrsotzpr/9/

Answer 2

您可以在overflow: hidden;上使用body，直播示例：

https://jsfiddle.net/k5zwqvjd/

  

overflow属性指定是否剪辑内容，渲染   滚动条或仅在溢出其块级别时显示内容   容器

您可以阅读更多here。

body {
  overflow: hidden;
  margin: 0;
}

Answer 3

  

你可以使用overflow：hidden;在#wrapper

中

#wrapper {

      transform-style: preserve-3d;
      height: 100%;
      perspective: 1px;
      overflow: hidden;
      border:3px solid cyan;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;

    }