OS X の列ビューに似たマルチスレッド ナビゲーションを作成しようとしています。
<nav>
ここのマークアップでは、高さが定義された親にあるリストのリストを取得しています。次に、それぞれli
が定義された幅とheight: 100%
. 次に、css の三角形のトリックを実行して小さな矢印を作成し、正のz-index
. ここまでは順調ですね。
ただし、列 2 は長すぎます。スクロールしたいのです。ただし、それを に割り当てるとul
、次のようになります。overflow-y: auto
ちょっと待って!あのスクロールバーはどこから来たの!? x のスクロールバーが欲しくなかった! しかし、設定overflow-x: visible
しても無視され、スクロールバーが表示されます。残念ながら、これは指定どおりです。これに対する CSS の回避策はありますか? リストのスクロールに反応して矢印の位置を変更するには、厄介な JavaScript を作成する必要がありますか?
編集:jsbinを追加