他の方向へスクロールしながら一方向に目に見えるオーバーフロー

Question

親と一緒にスクロールする絶対的に配置された要素を持つ必要があります。絶対配置された要素は、スクロール可能なコンテナよりも広い場合があります。その場合、コンテンツは現在クリップされています。 overflow-y: auto;とoverflow-x: visible;を組み合わせても機能しないようです。

問題を説明するためにここにJSFiddleがあります。ポップアップが水平スクロールを引き起こすことに注意してください。

これはスクロールするだけでhereのようになります。

これはCSSで達成できますか？

Answer 1

ハードコードされた幅があります。 <div>は、自動的にページの全幅がかかりますので、あなたはdiv要素は、ここでJSFiddle例ですmax-width: 90%

のようなものにwidth: 400pxを変更するように含めることができることを最大の幅に制限されてやりたい：http://jsfiddle.net/c8DdL/3/

Answer 2

後継の場合：問題にはJavaScriptソリューションが必要です。最終的に私が取り組んでいたプロジェクトの特徴は、この問題を避けるために変更され、より良い設計になりました。

Answer 3

使用をmax_widthの代わりにwidth 400を指定します。これが唯一の解決策です。

Answer 4

私は、水平スクロールバーを隠すことで（私はカスタムスクロールバーUIを使用して）、コンテナに300pxのパディング - 右と-300pxのマージン - 右を与えることによって解決策を見つけました。パディングとマージンは、絶対配置された要素がそのゾーンから伸びる場合にコンテナに余分な余地があることを除けば、通常の子が同じに整列するようにします。 （スクロール可能領域は外側の境界線を切り取っています）

スクロール領域の右側にコンテンツがある場合は、もちろんその上に伸びます。視覚的な問題ではない透明な背景を持つ。ただし、マウスイベントはブロックされます。

はそれを解決するために、私はそうのように、スクロールビューの兄弟のように2つの要素を追加しました：

// this outer container resizes to match the size of scrollContainer 
<div style={{position: "relative"}> 
    <div id="scrollContainer" style={{paddingRight: 300, marginRight: -300}}> 
     // stuff which might extend to the right 
    </div> 

    // the containers below resize with the outer container 
    // however, notice that the 2nd one is positioned only over the possibly-extended-onto area 

    <div id="insideArea" style={{position: "absolute", left: 0, right: 0, top: 0, bottom: 0}} 
     onMouseEnter={()=> { 
      // we're back inside, so enable scroll-container mouse-events 
      $("scrollContainer").css("pointer-events", "auto"); 

      // prevent self from blocking mouse events for scrollContainer 
      $("insideArea").css("display", "none"); 

      // re-enable extend-area div, so we know when mouse moves over it 
      $("extendArea").css("display", "block"); 
     }/> 

    <div id="extendArea" style={{position: "absolute", top: 0, bottom: 0, left: "100%", width: 300}} 
     onMouseEnter={()=> { 
      // we're over the extend-area, so disable scroll-container mouse events 
      $("scrollContainer").css("pointer-events", "none"); 

      // prevent self from blocking mouse events for behind-extend-area elements 
      $("#extendArea").css("display", "none"); 

      // re-enable inside-area div, so we know when mouse moves over it 
      $("#insideArea").css("display", "block"); 
     }/> 

上記は何をしますか？マウスが通常のスクロールビュー領域に入ると、ポインタイベントが有効になり、マウスの中身をクリックすることができますが、マウスが特殊な「拡張」領域に移動すると、スクロールビューのマウスイベントは無効にして、そのエリアの背後にある通常のアイテムをクリックさせます。

この解決法はおそらく誰にも使われることはありませんが、私はそれを見つけるのに十分な時間を費やしました。