web-dev-qa-db-ja.com

CSS overflow-y：visible、overflow-x：scroll

検索でこのような質問をいくつか見ましたが、質問が適切に回答されなかったか、回答がありませんでした。それで、私はもう一度尋ねます。

<style>
.parent { overflow-y:scroll; overflow-x:visible; width:100px; }
.child { position:relative; }
.child-menu { position:absolute; top:0px; left:-100px; display:inline-block; }
</style>

  <div class="parent">
  <!-- Lots of the following divs -->
  <div class="child">
    Text Line
    <div class="child-menu">some pop out stuff</div>
  </div>
</div>

さて、それはほんの一例です。しかし、基本的に、私が達成しようとしているのは、.childクラスをy軸上でスクロール可能にすることです...上下にスクロールします。しかし、x軸....子メニューが.parentコンテナの外側に表示されるようにします。

それは理にかなっていますか？そのため、ページがレンダリングされるときに、ブラウザはオーバーフローを完全に自動で解釈し、個別の軸を考慮しないということです。私は何か間違ったことをしているのですか、それともブラウザはまだCSS3仕様に対応していないのですか？ほとんどがChromeでのみテストされています。 enter image description here

cssoverflow
38
Senica Gonzalez

私はそれを考え出した！

親はoverflow：autoである必要があります。 .childはposition：relative;でなければなりません。 .child-menuはposition：fixedである必要があります。 [〜＃〜] no [〜＃〜]上部または左側の配置。これを行うと、コンテンツとインラインに保持されます。

子メニューを移動する必要がある場合は、上または左ではなくマージンを使用します。例margin-left：-100px;

[〜＃〜] edit [〜＃〜]

人々はまだこれを使用しているように見えるので、ページがスクロールするときに固定アイテムを移動するにはjavascriptを使用する必要があることに注意してください。

31
Senica Gonzalez

ここで解決しました！ CSSとJSを使用します。

.child:hover .child-menu { display: block; }

 .parent { overflow-y:auto; overflow-x:hidden; width:100px; height:150px  }
    .child { position:static; }
    .child-menu { position:absolute; display:inline-block; display: none; }

https://css-tricks.com/popping-hidden-overflow/

https://jsfiddle.net/68fBE/2/

2
blondo