1

私はこの写真のようなサイトを作成しようとしています:

Dropboxのレイアウト画像

問題：

  • 画像に示されているように、サイトを水平にスクロールする必要があります。
  • また、スクロールするには垂直スクロール要素が必要ですが、サイト全体ではなく、要素自体の内部です。サイトの最初のフレームを上下にスクロールすると、2 番目のフレームの高さが非常に高く、サイト全体が最も高い要素と同じ高さになるため、空白の領域までスクロールダウンします。

HTML 構造:

div #horizontal-container
    div #horizontal-wrapper
        div #section-1 .section
        div #section-2 .section
        div #section-3 .section
        so on...

CSS:

html, body {
    overflow: hidden;
}

#horizontal-container {
    position: fixed;
    top: 0; bottom: 0; left: 0; right: 0;
    overflow-y: hidden;
    overflow-x: scroll;
}

#horizontal-wrapper {
    width: 400%;
    height: 100%;
}

.section {
    width: 25%; /* A quarter of its parent with 400%, to be 100% of the window. */
    height: 100%;
    float: left;
    overflow-y: scroll;
}

うまくいけば、私はここでそれを明確にしました。これを機能させるために何が欠けていますか？overflow特定の水平スクロール ポイントに到達したときにコンテナーのプロパティを切り替えるには、JavaScript を少し組み込む必要がありますか? それは面倒ですね。:/

4

2 に答える 2

0

このコードを試して、水平スクローラーで固定幅のコンテンツ ブロックを生成できます。親投稿はこちらからご覧いただけます

<html>
<title>HTMLExplorer Demo: Horizontal Scrolling Content</title>
<head>
<style type="text/css">
#outer_wrapper {  
    overflow: scroll;  
    width:100%;
}
#outer_wrapper #inner_wrapper {
    width:6000px; /* If you have more elements, increase the width accordingly */
}
#outer_wrapper #inner_wrapper div.box { /* Define the properties of inner block */
    width: 250px;
    height:300px;
    float: left;
    margin: 0 4px 0 0;
    border:1px grey solid;
}
</style>
</head>
<body>

<div id="outer_wrapper">
    <div id="inner_wrapper">
        <div class="box">
            <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
             <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
            <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
            <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
             <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
            <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <!-- more boxes here -->
    </div>
</div>
</body>
</html>
于 2014-02-11T18:03:36.083 に答える