使用浏览器的主滚动条，滚动两个DIV内容和主要内容

Question

使用浏览器的主滚动条，滚动两个DIV内容和主要内容

javascriptcss

5

我无法解决如何在两个页面之间移动内容以及外部内容的问题。

我的布局如下：

- 头部和页脚 - 书籍 - 具有固定宽度和高度的页面。

我希望能够从主滚动条中滚动页面内容，而不需要任何页面滚动条（就像 Gmail 撰写邮件的例子一样）。

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

然后我们有两个页面，它们的内容彼此不同，并且每个页面可能比另一个页面更长。因此，在继续向页脚滚动之前，我们希望滚动浏览所有数据。

jsFiddle 示例：http://jsfiddle.net/7vqzF/2/ 最好只使用 CSS 解决此问题。

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

- Basit

我认为在这个类中删除.outsideBookSpace可以解决你的问题。 - Falguni Panchal

@Fags 我想要通过主滚动条滚动两个div。我不明白删除.outsideBookSpace是如何解决这个问题的。 - Basit

@acudars 这张图片是我们设置的布局结构，解决方案是没有两个页面滚动条，只显示主滚动条以控制页面数据+页眉和页脚。 - Basit

2

我正在努力理解你想要实现什么，因为我目前的理解没有意义。当用户滚动主页面滚动条（正常情况下向下滚动），你希望主页面和.pages同时滚动？这在较小的屏幕上该如何工作？用户要么永远看不到页脚，要么滚动条会很大，用户必须滚动整本书才能到达页脚。 - robooneus

先滚动到页脚，一旦到达页脚，然后开始使用主滚动条滚动两个页面。 - Basit

显示剩余5条评论

3个回答

1

将需要固定的标题部分放在单独的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。

- Rama Rao M

无法使用翻书效果完成此操作，例如 v4.globalquran.com。 - Basit

0

您可以使用纯CSS而无需表格来采用以下方法。

在此处查看在线演示。

结果：

Example

这意味着您需要稍微更改文档结构（我正在使用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;
}

- user1693593

无法使用翻页效果来实现此功能...就像这个演示一样 v4.globalquran.com - Basit

@Basit 翻页书？你的问题并没有提到翻页书效果，所以在我看来这篇帖子有点误导。而且你可以使用 CSS 变换和动画来实现翻页书效果。 - user1693593

是的，那是我的错误，我没有成功地解释清楚我的情况。我们已经在使用turn4.js的翻页效果，但是这个滚动对我们造成了问题。所以不知道该如何解决它。使用position fixed并不是一个解决办法。 - Basit

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Martin Höller · Accepted Answer

如果我理解您的问题正确，您正在寻找CSS属性fixed。以下是一些包括CSS的HTML代码，可能正好符合您的要求：

<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内容： enter image description here

浏览器滚动条只能滚动页面1/页面2中的<div>元素，而不能滚动页眉和页脚元素。

最后，这是在线演示的jsFiddle链接。