admin管理员组

文章数量:1330564

I can't figure out, on how to go around this problem for moving content within two pages + outside content.

I have following layout:

  • header + footer
  • book
  • pages with fixed width and height.

I want to scroll pages content from the main scrollbar without any page scroll bar (like gmail pose example)

The main problem is. book will show after header and if user is using smaller screen resolution, it will show scrollbar to scroll down to see book properly.

Then we have two pages, which content are different from each other and each page can be longer then the other one. so we want to scroll through all the data, before we continue scrolling back to footer again.

jsFiddle Example: /

It would be awesome to solve this from css only.

Layout Structure: (solution should have only one main browser scrollbar, to control the pages and outside book content from it.)

I can't figure out, on how to go around this problem for moving content within two pages + outside content.

I have following layout:

  • header + footer
  • book
  • pages with fixed width and height.

I want to scroll pages content from the main scrollbar without any page scroll bar (like gmail pose example)

The main problem is. book will show after header and if user is using smaller screen resolution, it will show scrollbar to scroll down to see book properly.

Then we have two pages, which content are different from each other and each page can be longer then the other one. so we want to scroll through all the data, before we continue scrolling back to footer again.

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

It would be awesome to solve this from css only.

Layout Structure: (solution should have only one main browser scrollbar, to control the pages and outside book content from it.)

  • javascript
  • css
Share Improve this question edited Aug 7, 2013 at 10:19 Basit asked Aug 7, 2013 at 9:32 BasitBasit 17.2k32 gold badges99 silver badges156 bronze badges 10
  • i think remove .outsideBookSpace in this class height your problem solved may be – Falguni Panchal Commented Aug 7, 2013 at 9:38
  • @Fags i want to scroll 2 div from main scrollbar. i dont see how removing .outsideBookSpace is the solution for that. – Basit Commented Aug 7, 2013 at 9:41
  • you want just the .book part to scroll with browser scroll.??? – maverickosama92 Commented Aug 7, 2013 at 9:49
  • @maverickosama92 yes .pages to scroll with browser scroll is the main goal, but if header and footer can also be scroll together with it, that would make things work perfectly. – Basit Commented Aug 7, 2013 at 9:59
  • 2 I am trying to figure out what you want to acplish, because the way I understand it makes no sense. When the user scrolls the main page scrollbar (as one would normally do to scroll down), you want both the main page to scroll and the .pages to scroll? How is this suppose to work on smaller screens? Either the user will never see the footer, or the scrollbar will be huge and the user would have to scroll through the entire book to get to it. – robooneus Commented Aug 23, 2013 at 8:29
 |  Show 5 more ments

3 Answers 3

Reset to default 6 +25

If I got your question right you are looking for the CSS attribute fixed. Here is some HTML including CSS that might do exactly what your are after:

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

Here is a screenshot from my browser showing the above HTML:

The Browser-Scrollbar scrolls only the page1/page2 <div> elemtents but not the header and footer elements.

And finally here is the jsFiddle Link for the online-demo.

Put your header part which needs to be in fixed in separate div and apply these styles.

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

for space add another div to bottom of the header 

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

Here is the jsfiddle.

You can use the following approach with pure CSS and no tables.

See online demo here.

Result:

It means however that you need to change the document structure a little (I am using HTML5 elements but this can easily be changed into normal divs if required) - as you can see the structure is fairly simple:

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

Now it's just a matter of styling this so that you can use main scroll-bar to scroll "both" pages. The essential class in this context is:

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

The important part with the page class is that its top and bottom margin is set to match header and footer. This is what makes the two pages visible even if the header and footer are fixed.

The rest of the CSS is just for example:

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

本文标签： javascriptScroll 2 DIV contentsmain content with browser39s main scrollbarStack Overflow

版权声明：本文标题：javascript - Scroll 2 DIV contents + main content with browser&#39;s main scrollbar - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742274268a2444895.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。