1

jQueryを使用していくつかのボタンにフックされた水平方向にスクロールするdivがあります。それは正常に機能しています。問題は、スクロール可能なコンテンツにネストされた div があり、コンテナーと重なるにつれてクリップされることです。x 軸ではオーバーフローが必要ですが、y では必要ありません。overflow-x: hidden、overflow-y visible はこれを解決するはずですが、そうではありません。オーバーフローを削除しても機能しますが、divをスクロールするにはoverflow-xが必要です。

以下の単純化された html / css - ロジックをスクロールせずに、それはここで問題となるものではない..簡単なはずですか?

ありがとうございます :) アンディ

    <!DOCTYPE html>
    <html>
        <head>
            <title>TestDiv</title>
        </head>
        <body>
            <div style="width:100%; height:150px; border:1px solid blue">
               TOP DIV
           </div>
           <div class="slide" style="height:150px; width:800px;  border: 1px solid blue; background-color: pink;">
               <div style="border: 1px solid blue; width:1200px; height:150px;" class="inner" id="slider">
                    <table  cellspacing="0" cellpadding="0" border="2" style="table-layout:fixed; width: 1200px; height:150px">
                    <tr><td>AAAAAAAAA</td><td>BBBBBBBBB</td><td><div class="container"><div class="testDiv">XXX</div></div>CCCCCCCCC</td><td>DDDDDDDDDD</td><td>EEEEEEEEEE</td><td>FFFFFFFFF</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td><td>GGGGGGGGGG</td></tr>
                </table>
            </div>
           </div>
            <div style="width:100%; height:150px; border:1px solid green;">
                BOTTOM
            </div>
        </body>
    </html>
<style scoped="scoped">
    .slide
    {
        position:relative;
        overflow-x: hidden;
        overflow-y:visible;
    }

    .slide .inner
    {
        overflow-y:visible;
        position:absolute;
        left:0;
        bottom:0;
        padding:0px;
    }
    .container
    {
        width: 20px;
        height: 20px;
        background-color: black;
        position: relative;
    }
    .testDiv
    {
        width: 235px;
        position: absolute;
        z-index: 999;
        left:20px;
        top: -180px;
        height: 200px;
        background-color: greenyellow;
    }
</style>
4

1 に答える 1

1

問題は、「固定」ポジショニングを使用していることです。これは、「相対」ポジショニングでのみ機能します。相対位置に変換するには、Top の位置が前の兄弟要素を基準にしているのに対し、left は親要素を基準にしていることを覚えておく必要があります。

于 2013-08-22T12:02:53.253 に答える