1

親 div をスクロール可能 (overflow:auto) にして、子 div をスクロールできないようにすることは可能ですか? いいえ、「position:fixed」はビューポートに固定されるため、使用できません。子 div を親 div に修正する必要があります。

コード例:

#pagecontainer {
    overflow:auto;
    width:1000px;
    height:450px;
}
#pagecontainer>div{   /*each of the pages*/
    margin-top:50px;
    padding-left:50px;
    padding-right:50px;
    position:relative;
}
.unscrollable{
    position:absolute;
    width: 250px;
}
.scrollable{
    margin-left:300px;
    float:left;
}

HTML

<div id="pagecontainer">

    <div id="page1">

        <div class="unscrollable"> <!--UNSCROLLABLE-->
            <a href="#page1" class="link">Link 1</a>
            <p>
            <a href="#page2" class="link">Link 2</a>
            <p>
            <a href="#page3" class="link">Link 3</a>
            <p>
            <a href="#page4" class="link">Link 4</a>
            <p>
        </div>

        <div class="scrollable"> <!--SCROLLABLE-->
            content content content
        </div>

    </div>

    <div id="page2">

        <div class="unscrollable"> <!--UNSCROLLABLE-->
            <a href="#page1" class="link">Link 1</a>
            <p>
            <a href="#page2" class="link">Link 2</a>
            <p>
            <a href="#page3" class="link">Link 3</a>
            <p>
            <a href="#page4" class="link">Link 4</a>
            <p>
        </div>

        <div class="scrollable"> <!--SCROLLABLE-->
            content content content
        </div>

    </div>

</div>

子 div のみを作成することはできません.scrollable overflow:auto(実際には修正されます.unscrollable)。これは、スクロールバーに 50px のマージンがあるため 50px のギャップがあり、.scrollable に対してのみスクロールするためです。スクロールバーをオンにする必要があります#pagecontainer、または#page1/#page2も問題ありません。

また.unscrollable外には出せません#pageX。コードを整理する必要があるの.unscrollableは、各ページのセクションです。.unscrollable外部に置く場合#pageX、各ページのスクロール不可の ID を作成する必要があります。つまり#unscrollable1 #unscrollable2、そのページを表示したい場合は、単に ( ).fadeIn()ではなく ( #page1, ).fadeIn() を呼び出します。それは信じられないほど厄介になります。つまり、肝心なのは、div の構造は変更できないということです。#unscrollable1#page1

私が必要としているのは、( ).fixTo( ) のような css を.unscrollable修正#pagecontainerまたはオーバーライドする javascript #page1/ jQuery 関数です。#page2.unscrollable#pagecontainer

4

2 に答える 2

0

考えられる解決策の 1 つを示す jsfiddle を作成しました。 http://jsfiddle.net/SF7nr/

スクロール可能のフローティングを削除し、 amax-heightと anを設定しoverflow: auto;てスクロールを有効にしました。

レイアウト上の理由から、ページ自体の最小高さも設定しました。見てみな。

于 2013-03-05T09:36:21.333 に答える
0

子を親に固定するには、on the parentとon the childdivを使用してみてください。position: relativedivposition: fixeddiv

div次に、子( top、bottom、leftおよび) で行うすべての配置はright、親に対して相対的になりますdiv。

于 2013-03-05T04:39:55.143 に答える