2

私が期待するように動作しないようですoverflow-x。overflow-y表示に設定overflow-xし、overflow-y自動に設定すると、表示としてでoverflow-xはなく非表示として動作します。

私は何かが足りないのですか、それともこれは正常ですか？

これが例です。

HTML：

</html
  <body>
    <div class='container'>
      <div class='content'>
        This is a content
      </div>
      <div class='content'>
        This is a content
      </div>
      <div class='content'>
        This is a content
      </div>
      <div class='content'>
        This is a content
      </div>
      <div class='content'>
        This is a content
      </div>
      <div class='content'>
        This is a content
      </div>
    </div>
  </body>
</html>

CSS：

.container {
  background: rgba(0, 0, 0, 0.1);
  width: 200px;
  height: 100px;

  overflow-y: auto;
  overflow-x: visible;
}

.content {
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: rgba(255, 255, 255, 0.6);
  position: relative;
  margin-left: -14px;
  padding-left: 14px;
}
4

2 に答える 2

5

実際overflow-xにはあなたの例のように動作autoします。

overflow-xとの組み合わせがいくつかありますがoverflow-y、それらは単に機能しないため、組み合わせることができません。コンテナ内で一方向にスクロール可能で、コンテナ外で他方向に表示できるコンテンツを作成することはできません。

于 2012-07-27T09:38:38.377 に答える
3

編集：OPによる詳細の後：

オーバーフローCSSプロパティは、コンテンツをクリップするか、スクロールバーをレンダリングするか、ブロックレベル要素のオーバーフローコンテンツを表示するかを指定します。

デフォルトのvisibleとは異なる値でoverflowプロパティを使用すると、新しいブロックフォーマットコンテキストが作成されます。これは、フロートがスクロール要素と交差するかのように技術的に必要であり、スクロール可能な要素のコンテンツを侵入するフロートの周りに強制的に再ラップします。再ラップは各スクロールステップの後に発生し、スクロールエクスペリエンスが非常に遅くなります。プログラムでscrollTopを関連するHTML要素に設定することにより、オーバーフローに非表示の値がある場合でも、要素をスクロールする必要がある場合があることに注意してください。

オーバーフローの値：

表示： デフォルト値。コンテンツはクリップされません。コンテンツボックスの外にレンダリングされる場合があります。

非表示：コンテンツはクリップされ、スクロールバーは提供されません。

スクロール： コンテンツはクリップされ、デスクトップブラウザは、コンテンツがクリップされているかどうかに関係なく、スクロールバーを使用します。これにより、動的な環境でスクロールバーが表示されたり消えたりする問題が回避されます。プリンタはオーバーフローしたコンテンツを印刷する場合があります。

auto： ユーザーエージェントに依存します。Firefoxのようなデスクトップブラウザは、コンテンツがオーバーフローした場合にスクロールバーを提供します。

リファレンスを参照してください

詳細を追加：

差出人：http ：//www.brunildo.org/test/Overflowxy2.html

Gecko、Safari、Operaでは、「hidden」と組み合わせると「visible」は「auto」になります（つまり、「visible」は「visible」とは異なるものと組み合わせると「auto」になります）。Gecko 1.8、Safari 3、Opera9.5はそれらの間でかなり一貫しています。

また、W3C仕様には次のように書かれています。

'overflow-x'および'overflow-y'の計算値は、指定された値と同じですが、'visible'との組み合わせが不可能な場合があります。一方が'visible'として指定され、もう一方が'scroll'の場合または「auto」の場合、「visible」は「auto」に設定されます。'overflow-y'が同じ場合、'overflow'の計算値は'overflow-x'の計算値と等しくなります。それ以外の場合は、「overflow-x」と「overflow-y」の計算値のペアです。

于 2012-07-27T09:33:55.377 に答える