6

x軸のオーバーフローを隠しながら、y軸のオーバーフローを許可しようとしています。これらのプロパティを追加すると、次のことが予想される場合があります。

.overflow {
  overflow-x: hidden;
  overflow-y: visible;
}

ブロック レベルの要素に追加するだけで十分ですが、ここに記載されている CSS 実装の癖により、これは実際には機能しません。最終的には、overflow-y の計算値が auto になり、overflow-x は非表示のままになります。

私が望む動作を達成する他の方法はありますか?

もう少し詳しく説明すると、カスタム ボタンを使用してスクロールする項目の横方向のリストがあります。リストの包含要素の幅は、リストの幅よりもはるかに小さいです。独自のカスタム ボタンを使用してリストをナビゲートしているため、スクロール バーを表示したくありません。そのため、overflow-x を非表示にする必要があります。ホバー時に、変換を適用して要素のサイズを拡大したいのですが、要素が含まれている要素の上部と下部の外側にオーバーフローできるようにしたいため、overflow-y が表示される必要があります。

4

1 に答える 1

7

余分なマークアップを追加してもかまわない場合は、簡単な解決策があるようです。

オーバーフローごとに 1 つずつ、2 つの div を使用するだけです。

例えば：

<div class="outer">
    <div class="middle">
         <!-- your content here -->
    </div>
</div>

そして、次のマークアップ:

.outer {   
    overflow-y: visible;
}

.middle{
    overflow-x: hidden;
}

仕事をしているようです。

ここに小さな例があります。

于 2012-05-09T19:08:35.137 に答える