1

Chromeに奇妙なバグがありますが、Firefoxにはありません。できるだけ簡単な例を作成しました。

<html>
<head>
    <style>
        body
        {
            width:100%;
            height:100%;
            margin:0;
            padding:0;
            display:-webkit-box;
            display:-moz-box;
            -webkit-box-orient:vertical;
            -moz-box-orient:vertical;
        }
        .scrollable
        {
            -webkit-box-flex:1;
            -moz-box-flex:1;
            overflow:auto;
            background-color:red;
            display:-webkit-box;
            display:-moz-box;
        }
        .fixed
        {
            background-color:blue;
        }
        button:hover
        {
            background-color:red;
            opacity:.2;
        }
    </style>
</head>
<body>
<div class="fixed">
    <h1>Fixed</h1>
    <button>Test</button>
</div>
<div class="scrollable">
    <div>
        <h1>Scrollable</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices nulla nec nulla vehicula a condimentum enim suscipit. Morbi accumsan est eget elit aliquet dictum bibendum ligula feugiat. Nam gravida sagittis luctus. Vestibulum cursus leo eu velit fermentum a commodo dolor imperdiet. Fusce non libero nec nisi molestie auctor et in est. Ut ac nibh est, vitae posuere velit. Quisque vulputate mattis sapien, interdum imperdiet purus placerat ornare. Aliquam erat volutpat. Phasellus est erat, suscipit non sollicitudin eget, porta et sem. Suspendisse tempor ullamcorper tellus, sed luctus magna auctor et. Sed et enim vel dolor eleifend eleifend sollicitudin at velit. Phasellus ac enim turpis. Phasellus lobortis nisi et augue sodales non fringilla tellus rutrum. Cras pretium metus facilisis metus viverra et commodo sapien viverra. Donec purus tellus, adipiscing ultricies interdum sed, aliquam feugiat nunc.</p>
        <button>Test</button>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices nulla nec nulla vehicula a condimentum enim suscipit. Morbi accumsan est eget elit aliquet dictum bibendum ligula feugiat. Nam gravida sagittis luctus. Vestibulum cursus leo eu velit fermentum a commodo dolor imperdiet. Fusce non libero nec nisi molestie auctor et in est. Ut ac nibh est, vitae posuere velit. Quisque vulputate mattis sapien, interdum imperdiet purus placerat ornare. Aliquam erat volutpat. Phasellus est erat, suscipit non sollicitudin eget, porta et sem. Suspendisse tempor ullamcorper tellus, sed luctus magna auctor et. Sed et enim vel dolor eleifend eleifend sollicitudin at velit. Phasellus ac enim turpis. Phasellus lobortis nisi et augue sodales non fringilla tellus rutrum. Cras pretium metus facilisis metus viverra et commodo sapien viverra. Donec purus tellus, adipiscing ultricies interdum sed, aliquam feugiat nunc.</p>
        <button>Test</button>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices nulla nec nulla vehicula a condimentum enim suscipit. Morbi accumsan est eget elit aliquet dictum bibendum ligula feugiat. Nam gravida sagittis luctus. Vestibulum cursus leo eu velit fermentum a commodo dolor imperdiet. Fusce non libero nec nisi molestie auctor et in est. Ut ac nibh est, vitae posuere velit. Quisque vulputate mattis sapien, interdum imperdiet purus placerat ornare. Aliquam erat volutpat. Phasellus est erat, suscipit non sollicitudin eget, porta et sem. Suspendisse tempor ullamcorper tellus, sed luctus magna auctor et. Sed et enim vel dolor eleifend eleifend sollicitudin at velit. Phasellus ac enim turpis. Phasellus lobortis nisi et augue sodales non fringilla tellus rutrum. Cras pretium metus facilisis metus viverra et commodo sapien viverra. Donec purus tellus, adipiscing ultricies interdum sed, aliquam feugiat nunc.</p>
        <button>Test</button>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices nulla nec nulla vehicula a condimentum enim suscipit. Morbi accumsan est eget elit aliquet dictum bibendum ligula feugiat. Nam gravida sagittis luctus. Vestibulum cursus leo eu velit fermentum a commodo dolor imperdiet. Fusce non libero nec nisi molestie auctor et in est. Ut ac nibh est, vitae posuere velit. Quisque vulputate mattis sapien, interdum imperdiet purus placerat ornare. Aliquam erat volutpat. Phasellus est erat, suscipit non sollicitudin eget, porta et sem. Suspendisse tempor ullamcorper tellus, sed luctus magna auctor et. Sed et enim vel dolor eleifend eleifend sollicitudin at velit. Phasellus ac enim turpis. Phasellus lobortis nisi et augue sodales non fringilla tellus rutrum. Cras pretium metus facilisis metus viverra et commodo sapien viverra. Donec purus tellus, adipiscing ultricies interdum sed, aliquam feugiat nunc.</p>
        <button>Test</button>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices nulla nec nulla vehicula a condimentum enim suscipit. Morbi accumsan est eget elit aliquet dictum bibendum ligula feugiat. Nam gravida sagittis luctus. Vestibulum cursus leo eu velit fermentum a commodo dolor imperdiet. Fusce non libero nec nisi molestie auctor et in est. Ut ac nibh est, vitae posuere velit. Quisque vulputate mattis sapien, interdum imperdiet purus placerat ornare. Aliquam erat volutpat. Phasellus est erat, suscipit non sollicitudin eget, porta et sem. Suspendisse tempor ullamcorper tellus, sed luctus magna auctor et. Sed et enim vel dolor eleifend eleifend sollicitudin at velit. Phasellus ac enim turpis. Phasellus lobortis nisi et augue sodales non fringilla tellus rutrum. Cras pretium metus facilisis metus viverra et commodo sapien viverra. Donec purus tellus, adipiscing ultricies interdum sed, aliquam feugiat nunc.</p>
        <button>Test</button>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices nulla nec nulla vehicula a condimentum enim suscipit. Morbi accumsan est eget elit aliquet dictum bibendum ligula feugiat. Nam gravida sagittis luctus. Vestibulum cursus leo eu velit fermentum a commodo dolor imperdiet. Fusce non libero nec nisi molestie auctor et in est. Ut ac nibh est, vitae posuere velit. Quisque vulputate mattis sapien, interdum imperdiet purus placerat ornare. Aliquam erat volutpat. Phasellus est erat, suscipit non sollicitudin eget, porta et sem. Suspendisse tempor ullamcorper tellus, sed luctus magna auctor et. Sed et enim vel dolor eleifend eleifend sollicitudin at velit. Phasellus ac enim turpis. Phasellus lobortis nisi et augue sodales non fringilla tellus rutrum. Cras pretium metus facilisis metus viverra et commodo sapien viverra. Donec purus tellus, adipiscing ultricies interdum sed, aliquam feugiat nunc.</p>
        <button>Test</button>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices nulla nec nulla vehicula a condimentum enim suscipit. Morbi accumsan est eget elit aliquet dictum bibendum ligula feugiat. Nam gravida sagittis luctus. Vestibulum cursus leo eu velit fermentum a commodo dolor imperdiet. Fusce non libero nec nisi molestie auctor et in est. Ut ac nibh est, vitae posuere velit. Quisque vulputate mattis sapien, interdum imperdiet purus placerat ornare. Aliquam erat volutpat. Phasellus est erat, suscipit non sollicitudin eget, porta et sem. Suspendisse tempor ullamcorper tellus, sed luctus magna auctor et. Sed et enim vel dolor eleifend eleifend sollicitudin at velit. Phasellus ac enim turpis. Phasellus lobortis nisi et augue sodales non fringilla tellus rutrum. Cras pretium metus facilisis metus viverra et commodo sapien viverra. Donec purus tellus, adipiscing ultricies interdum sed, aliquam feugiat nunc.</p>
        <button>Test</button>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices nulla nec nulla vehicula a condimentum enim suscipit. Morbi accumsan est eget elit aliquet dictum bibendum ligula feugiat. Nam gravida sagittis luctus. Vestibulum cursus leo eu velit fermentum a commodo dolor imperdiet. Fusce non libero nec nisi molestie auctor et in est. Ut ac nibh est, vitae posuere velit. Quisque vulputate mattis sapien, interdum imperdiet purus placerat ornare. Aliquam erat volutpat. Phasellus est erat, suscipit non sollicitudin eget, porta et sem. Suspendisse tempor ullamcorper tellus, sed luctus magna auctor et. Sed et enim vel dolor eleifend eleifend sollicitudin at velit. Phasellus ac enim turpis. Phasellus lobortis nisi et augue sodales non fringilla tellus rutrum. Cras pretium metus facilisis metus viverra et commodo sapien viverra. Donec purus tellus, adipiscing ultricies interdum sed, aliquam feugiat nunc.</p>
        <button>Test</button>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices nulla nec nulla vehicula a condimentum enim suscipit. Morbi accumsan est eget elit aliquet dictum bibendum ligula feugiat. Nam gravida sagittis luctus. Vestibulum cursus leo eu velit fermentum a commodo dolor imperdiet. Fusce non libero nec nisi molestie auctor et in est. Ut ac nibh est, vitae posuere velit. Quisque vulputate mattis sapien, interdum imperdiet purus placerat ornare. Aliquam erat volutpat. Phasellus est erat, suscipit non sollicitudin eget, porta et sem. Suspendisse tempor ullamcorper tellus, sed luctus magna auctor et. Sed et enim vel dolor eleifend eleifend sollicitudin at velit. Phasellus ac enim turpis. Phasellus lobortis nisi et augue sodales non fringilla tellus rutrum. Cras pretium metus facilisis metus viverra et commodo sapien viverra. Donec purus tellus, adipiscing ultricies interdum sed, aliquam feugiat nunc.</p>
        <button>Test</button>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices nulla nec nulla vehicula a condimentum enim suscipit. Morbi accumsan est eget elit aliquet dictum bibendum ligula feugiat. Nam gravida sagittis luctus. Vestibulum cursus leo eu velit fermentum a commodo dolor imperdiet. Fusce non libero nec nisi molestie auctor et in est. Ut ac nibh est, vitae posuere velit. Quisque vulputate mattis sapien, interdum imperdiet purus placerat ornare. Aliquam erat volutpat. Phasellus est erat, suscipit non sollicitudin eget, porta et sem. Suspendisse tempor ullamcorper tellus, sed luctus magna auctor et. Sed et enim vel dolor eleifend eleifend sollicitudin at velit. Phasellus ac enim turpis. Phasellus lobortis nisi et augue sodales non fringilla tellus rutrum. Cras pretium metus facilisis metus viverra et commodo sapien viverra. Donec purus tellus, adipiscing ultricies interdum sed, aliquam feugiat nunc.</p>
        <button>Test</button>
    </div>
</div>
</body>

基本的に、上部に固定ヘッダーがあり、その下にウィンドウの高さ全体を埋める垂直方向にスクロール可能なセクションがあるレイアウトを作成しようとしています。これは、chromeとfirefoxの両方でうまく機能するようです。Chromeで私が抱えている問題は、ボタンにホバー効果を加えると、ペインが上にスクロールして戻ることです。私の推測では、ホバー効果が痛みを再び引き起こし、それが起こると、それは上にスクロールします。

他のテストでは、overflow：autoが設定されたボックスレイアウト要素が原因であると思われます。

他の誰かがこの問題を経験しましたか？誰かがこれを別の方法で行う方法や修正する方法について何か提案がありますか？

ありがとう！

編集：

私が作成しようとしている完全なレイアウトは次のとおりです。

|---------------------------|
| Main Header               |
|---------------------------|
| Content Header   | Side   |
|------------------| Bar    |
|                  |        |
| Content          |        |
|                  |        |
-----------------------------

「コンテンツ」と「サイドバー」を独立してスクロールさせたいのですが。「コンテンツ」は水平方向と垂直方向の両方にスクロールする必要がありますが、「サイドバー」は垂直方向にのみスクロールする必要があります。

4

3 に答える 3

1

ここにいくつかのCSSmodがあり、正常に動作します-http://jsfiddle.net/VHKbp/1/

お役に立てれば！

于 2012-05-18T17:35:36.997 に答える
1

Dipakが提供した答えは、ブラウザーのネイティブスクロールを使用するのではなく、スクロール可能なdivを使用したいという特別な理由がない限り、優れたソリューションでした。

私がこれに対して行う他の唯一の提案は、固定ヘッダーで覆われているスペースを補うために、スクロール可能なdivにパディングトップがあることを確認することです。

だからこのようなもの：

#header {
  position: fixed;
  height: 100px;
  width: 100%
  top: 0;
  left: 0;
}

.scrollable-div {
  display: block;
  padding-top: 100px;
}

おそらく追加のスタイルが必要になりますが、カバーしているものを良心的に理解してください。また、固定ヘッダーを使用せずにコンテキストでスクロール可能なdivを機能させる必要がある場合は、本文にパディングを行うか、スペースを占有する可能性のある空の「パディング」divを作成する必要があります。このように、サイトが進化するにつれて、個々の要素について心配する必要はありません。ヘッダーを変更するたびに、ヘッダーは独立したままになります。

覚えておくべきこと:)

于 2012-05-18T18:15:12.297 に答える
0

これはちょっと不気味ですが、Googleが問題を修正するアップデートをリリースしたばかりのようです。これで、フレックスボックスのレイアウトが希望のレイアウトで機能するようになりました。

于 2012-05-22T14:21:49.063 に答える