Javascript 滚动2个DIV contents+；带浏览器的主要内容'；s主滚动条_Javascript_Css

Javascript 滚动2个DIV contents+；带浏览器的主要内容'；s主滚动条

javascript css

Javascript 滚动2个DIV contents+；带浏览器的主要内容'；s主滚动条,javascript,css,Javascript,Css,我想不出，如何绕过这个问题，将内容移动到两个页面内+外部内容我的布局如下：页眉+页脚书具有固定宽度和高度的页面我想在没有任何页面滚动条的情况下从主滚动条滚动页面内容（如gmail compose示例）主要问题是。书将在页眉后显示，若用户使用较小的屏幕分辨率，它将显示滚动条向下滚动以正确查看书然后我们有两个页面，内容彼此不同，每个页面可以比另一个页面长。所以，我们希望在继续滚动回页脚之前，滚动所有数据 jsFiddle示例：如果只从css解决这个问题，那就太棒了布局结构：（解

我想不出，如何绕过这个问题，将内容移动到两个页面内+外部内容

我的布局如下：

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

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

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

然后我们有两个页面，内容彼此不同，每个页面可以比另一个页面长。所以，我们希望在继续滚动回页脚之前，滚动所有数据

jsFiddle示例：

如果只从css解决这个问题，那就太棒了

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

如果我答对了你的问题，你正在寻找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>


身体{
边缘顶部：150px；
}
.标题{
宽度：100%；
位置：固定；
排名：0；
背景色：白色；
底部边框：2件纯色浅蓝色
}
.页脚{
宽度：100%；
位置：固定；
底部：0；
背景色：白色；
边框顶部：2件纯色浅蓝色
}
.预订桌{
垂直对齐：顶部；
}
.page1、.page2{
边框：实心1px红色；
宽度：400px；
}
标题

家
联系我们

第1页
从主滚动条滚动

从主滚动条滚动

从主滚动条滚动

...
第2页
从主滚动条滚动

从主滚动条滚动

...
我的页脚

以下是我的浏览器中显示上述HTML的屏幕截图：

浏览器滚动条仅滚动page1/page2

元素，而不滚动页眉和页脚元素

最后是在线演示的示例。

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


标题
主页
联系我们
.修理{
位置：固定；
顶部：0px；
左：0px；
背景：#FFF；
宽度：100%；
边框底部：1px纯黑；
}

在页眉底部添加另一个div作为空格

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


.空间{
宽度：100%；
高度：150像素；
}

下面是一个例子。

您可以对纯CSS和无表使用以下方法

结果:

但是，这意味着您需要稍微更改文档结构（我使用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>

页面

类的重要部分是将其顶部和底部边距设置为与页眉和页脚匹配。这就是为什么即使页眉和页脚是固定的，这两个页面仍然可见

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;
}

我想，在这个班级的高度，你的问题可以解决be@Fags我想从主滚动条滚动2个div。我不知道如何删除.outsideBookSpace才是解决方案。您只希望.book部分与浏览器滚动一起滚动。？？@maverickosama92是的。与浏览器滚动一起滚动的页面是主要目标，但如果页眉和页脚也可以与之一起滚动，这将使事情完美地运行。我试图弄清楚你想要完成什么，因为我对它的理解毫无意义。当用户滚动主页滚动条时（通常会向下滚动），您希望同时滚动主页和滚动.pages吗？这在较小的屏幕上是如何工作的？要么用户永远看不到页脚，要么滚动条很大，用户必须滚动整本书才能找到它。这里是我的演示，请从页面末尾拖动，切换到上一页。要查看两页的演示：正如您所看到的，不能在其上使用固定样式。我想仍然可以使用固定样式，但实现起来会更困难。但是除了图像边框和turnjs JavaScript（在最初的问题中没有提到）的问题之外，我的示例是否实现了您所期望的功能？是的，但是在您提供的示例中，两个页面的大小都不同。页面大小需要相同，滚动大小应该/可以不同，如果需要滚动，它们将同时滚动。还有，turnjs和图像边框是如何实现的。翻页书效果无法实现这一点。。就像这个演示v4.globalquran。com@Basit活页簿？你的问题没有提到翻页书的效果，所以我觉得这篇文章有点误导。你可以使用CSS转换和动画来实现翻页书的效果。是的，这是我的错误，我没有正确地解释我的情况。我们已经在turn4.js中使用了flip book效果，但是这个卷轴给我们带来了问题。所以，我不知道如何绕过它。使用“位置固定”并不是一个解决方案。使用翻页书效果无法做到这一点，例如v4.globalquran.com

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;
}