使用浏览器的主滚动条滚动 2 DIV 内容 + 主要内容答案

【问题标题】：Scroll 2 DIV contents + main content with browser's main scrollbar使用浏览器的主滚动条滚动 2 DIV 内容 + 主要内容
【发布时间】：2013-08-07 09:32:23
【问题描述】：

我不知道如何解决这个问题，以便在两页内移动内容 + 外部内容。

我有以下布局：

页眉+页脚
书
具有固定宽度和高度的页面。

我想在没有任何页面滚动条的情况下从主滚动条滚动页面内容（如 gmail compose 示例）

主要问题是。书将显示在标题之后，如果用户使用较小的屏幕分辨率，它将显示滚动条以向下滚动以正确查看书。

然后我们有两个页面，它们的内容彼此不同，并且每个页面都可以比另一个页面更长。所以我们要滚动浏览所有数据，然后再继续滚动回到页脚。

jsFiddle Example:http://jsfiddle.net/7vqzF/2/

仅从 css 解决这个问题真是太棒了。

布局结构：（解决方案应该只有一个主浏览器滚动条，以控制页面和外部书籍内容。）

【问题讨论】：

我认为在此类高度中删除 .outsideBookSpace 您解决的问题可能是
@Fags 我想从主滚动条滚动 2 个 div。我不明白删除 .outsideBookSpace 是如何解决的。
您只希望 .book 部分随浏览器滚动而滚动。???
@maverickosama92 是的 .pages 与浏览器滚动一起滚动是主要目标，但如果页眉和页脚也可以一起滚动，那就可以完美地工作了。
我想弄清楚你想要完成什么，因为我理解它的方式没有意义。当用户滚动主页滚动条时（通常会向下滚动），您希望主页滚动和 .pages 滚动吗？这假设如何在较小的屏幕上工作？要么用户永远看不到页脚，要么滚动条很大，用户必须滚动整本书才能找到它。

标签： javascript css

【解决方案1】：

如果我的问题没有错，那么您正在寻找 CSS 属性 fixed。以下是一些 HTML，包括 CSS，可能完全符合您的要求：

<html>
  <head>
    <style>
      body {
        margin-top: 150px;
      }

      .header {
        width: 100%;
        position: fixed;
        top: 0;
        background-color: white;
        border-bottom: 2px solid lightblue
      }

      .footer {
        width: 100%;
        position: fixed;
        bottom: 0;
        background-color: white;
        border-top: 2px solid lightblue
      }

      .book table td {
        vertical-align: top;
      }

      .page1, .page2 {
        border: solid 1px red;
        width: 400px;
      }
    </style>
  </head>

  <body>
    <div class="header">
      <h1>Header</h1>
      <ul>
        <li>home</li>
        <li>contact us</li>
      </ul>
    </div>

    <div class="book">

      <table>
        <tr>
          <td>
            <div class="page1">
              <h2>Page1</h2>
              scroll from main scrollbar<br/>
              scroll from main scrollbar<br/>
              scroll from main scrollbar<br/>
              ...
            </div>
          </td>
          <td>
            <div class="page2">
              <h2>Page2</h2>
              scroll from main scrollbar<br/>
              scroll from main scrollbar<br/>
              ...
            </div>
          </td>
        </tr>
      </table>
    </div>

    <div class="footer">
      My Footer
    </div>     

  </body>
</html>

这是我浏览器的屏幕截图，显示了上面的 HTML：

浏览器滚动条仅滚动 page1/page2 <div> 元素，但不滚动页眉和页脚元素。

最后是在线演示的jsFiddle Link。

【讨论】：

这里是我所拥有的演示，请从页面末尾拖动切换到上一页。看两页demo：v4.globalquran.com 如你所见，不能使用固定样式就可以了。
恕我直言，仍然可以使用固定样式，但实现起来会比较棘手。但除了图像边框和 turnjs JavaScript（原始问题中未提及）的问题之外，我的示例是否符合您的预期？
是的，但是在您提供的示例中，两种页面大小都不同。页面大小需要相同，滚动大小应该/可以不同，如果需要滚动，它们将同时滚动。还有怎么可能使用turnjs和图像边框..

【解决方案2】：

将需要固定的标题部分放在单独的 div 中并应用这些样式。

  <div class="fix">
    <h1> Header</h1>
    <menu><ul><li>home</li><li>contact us</li></ul></menu>
    </div>
.fix{
 position:fixed;
    top:0px;
    left:0px;
    background:#FFF;
    width:100%;
    border-bottom:1px solid black;
}

为空间添加另一个div到标题的底部

<div class="space"></div>
.space{
 width:100%;
 height:150px;   
}

这里是jsfiddle。

【讨论】：

不能用翻书效果做到这一点，比如这个 v4.globalquran.com

【解决方案3】：

您可以在纯 CSS 和无表格的情况下使用以下方法。

See online demo here。

结果：

这意味着您需要稍微更改文档结构（我使用的是 HTML5 元素，但如果需要，这可以很容易地更改为普通 div） - 正如您所看到的结构相当简单：

<header>Header
    <nav>Menu</nav>
</header>

<main>
    <div class="page">
        <h3>Page 1</h3>
        scroll from main scrollbar
        ....
    </div>
    <div class="page">
        <h3>Page 2</h3>
            scroll from main scrollbar
            ....
    </div>
</main>

<footer>Footer</footer>

现在只需设置样式，以便您可以使用主滚动条滚动“两个”页面。这种情况下的基本类是：

.page {
    float:left;
    margin:70px 10px 50px 10px;
    border:1px solid #000;
    width:45%;
}

page 类的重要部分是它的顶部和底部边距设置为匹配页眉和页脚。即使页眉和页脚已固定，这也是使两个页面可见的原因。

其余的 CSS 只是举例：

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
header {
    position:fixed;
    top:0;
    width:100%;
    height:70px;
    font:32px sans-serif;
    color:#fff;
    background:#555;
}
nav {
    position:absolute;
    bottom:0;
    font:12px sans-serif;
}
footer {
    position:fixed;
    width:100%;
    bottom:0;
    height:50px;
    background:#555;
}

【讨论】：

不能用翻书效果做到这一点。就像这个演示 v4.globalquran.com
@Basit 翻书？你的问题没有说明翻书效果，所以 IMO 这篇文章有点误导。并且您可以使用 CSS 变换和动画来实现翻书效果。
是的，这是我的错误，我没有设法正确解释我的情况。我们已经在 turn4.js 中使用了翻书效果，但是这个滚动给我们带来了问题。所以不知道如何绕过它。使用固定位置，不是解决方案。