2つのDIVコンテンツ+ブラウザのメインスクロールバーのメインコンテンツをスクロールしてください

コンテンツを2ページ+コンテンツ外に移動するためのこの問題の回避方法についてはわかりません。2つのDIVコンテンツ+ブラウザのメインスクロールバーのメインコンテンツをスクロールしてください

ヘッダー+フッター
ブック固定幅と高さ
ページ：

は、私は次のようなレイアウトを持っています。

は私が主な問題がある

（Gmailなどの例を構成する）任意のページのスクロールバーのないメインスクロールバーからコンテンツページをスクロールしたいです。本はヘッダーの後に表示され、ユーザーが小さい画面解像度を使用している場合はスクロールバーがスクロールして本を正しく表示します。

次に、2つのページがあります。内容はそれぞれ異なり、各ページはもう一方のページよりも長くなります。そのため、すべてのデータをスクロールしてから、フッターをもう一度スクロールしなおしてください。

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

それだけで、CSSからこの問題を解決するには素晴らしいだろう。

レイアウト構造：（ソリューションは、ページとそれから外部書籍コンテンツを制御するために、唯一の主要ブラウザのスクロールバーを持っている必要があります。） layout structure

出典

2013-08-07 Basit

私は解決し、あなたの問題は、私がメインのスクロールバーから2 div要素をスクロールしたい – falguni

@Fagsかもしれ、このクラスの高さに.outsideBookSpaceを削除すると思います。私はどのように。outsideBookSpaceを削除するのがその解決策であるか分かりません。 – Basit

.bookの部分だけをブラウザのスクロールでスクロールする – maverickosama92

私は右のあなたがCSS属性を探しているあなたの質問を得た場合fixed。ここにあなたが後にしているまさに行う可能性がありますCSSを含むいくつかのHTMLは次のとおりです。 enter image description here

ブラウザのスクロールバーのスクロールのみページ1 /ページ2：ここでは

<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を示す私のブラウザからのスクリーンショットです<div>要素はヘッダー要素とフッター要素ではなく、要素ではありません。

最後にオンラインデモ用のjsFiddle Linkがあります。

出典

2013-08-21 10:07:44

ここにあるデモは、ページの最後からドラッグして、前のページに変更してください。 2ページのデモを見るには：http://v4.globalquran.com/ご覧のとおり、固定スタイルを使用することはできません。 – Basit

IMHOまだ固定スタイルを使用することは可能ですが、実装するのは難しいでしょう。しかし、画像境界や問題のJavaScriptの問題のほかに、元の質問には言及されていませんでした。 –

はい、指定した例では両方のページサイズが異なります。ページサイズは同じでなければならず、スクロールサイズは異なっていなければならず、スクロールする必要がある場合には、両方同時にスクロールします。また、どのようにturnjsと画像の境界線で可能です。 – Basit

別の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 class="space"></div> 
.space{ 
width:100%; 
height:150px; 
}

ここjsfiddleであるヘッダの下に別のDIVを追加します。

出典

2013-08-27 10:52:51

このようなフリップブックの効果でそれを行うことはできませんv4.globalquran.com – Basit

純粋なCSSとテーブルを使用せずに次の方法を使用できます。

See online demo here。

結果：

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クラスとの重要な部分は、その上部と下部の余白は、ヘッダーとフッターを一致するように設定されていることです。ヘッダーとフッターが固定されていても、2つのページが表示されるようになります。

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

出典

2013-08-28 07:40:00 K3N

このデモのようにv4.globalquran.com – Basit

@Basitパラパラ漫画？あなたの質問は、フリップブックの効果については何も言わないので、IMOはポストを少し誤解しています。また、CSSの変形やアニメーションを使用してフリップブック効果を実現することもできます。 – K3N

はい、それは私の間違いでした。私は自分の状況を正しく説明することができませんでした。私たちはすでにturn4.jsでフリップブック効果を使用していますが、このスクロールは私たちに問題を引き起こしています。だからそれを回避する方法を知らない。固定された位置を使用することは、そのための解決策ではありません。 – Basit

2つのDIVコンテンツ+ブラウザのメインスクロールバーのメインコンテンツをスクロールしてください

答えて

関連する問題