1

私は<ul/>水平に設定され、オーバーフロー<div/>したときに残りを表示できるようにに含まれているを持っています。これは次のようになります。<ul/><div/>

jsFiddle

水平スクロール<ul/>

HTML：

<div>
    <ul>
        <li>HEADER</li>
        <li>Item1</li>
        <li>Item2</li>
        <!-- Additional items -->
    </ul>
</div>

CSS：

div {
    white-space:nowrap; overflow-x:scroll; width:100%;}
ul {
    list-style-type:none; }
li {
    display:inline-block; }

<ul/>オーバーフローをスクロールしながら、インプレースの最初の要素を「修正」する方法はありますか？

最初の要素（テキストを"HEADER"含む）は、残りのアイテムがスクロールしている間、所定の位置にとどまる必要があります。これには「エレガントな」解決策がないかもしれないことを私は理解しています。

"HEADER"アイテムをの外側の別の要素にしようとしました<ul/>が、<ul/>幅をに設定しているため、ブラウザウィンドウの外側にオーバーフロー100%全体が発生します。<ul/>

質問にのタグを付けたのは、a）アプリケーションですでに$.clone()を使用しており、b）要素を修正してその場で「修正」できる可能性があるためです。それが答えかもしれませんが、私は特定の実装、またはこれを達成するためのより簡単な方法があるかどうかに苦労しています。

4

3 に答える 3

3

フィドルに基づいて、次のCSSを変更/追加するだけです:(フィドル）

ul {
    list-style-type:none;
    margin-left: 85px;
}

li:first-child {
    position: fixed;
    margin-left: -85px;
    background-color: white;
}

固定ヘッダーの背景は、スクロールされたヘッダーが背後に表示されないように設定する必要がliあります。

于 2013-03-13T23:07:47.873 に答える
0

私はポジションで遊びたかった：しばらくの間修正されたので、これが私があなたのために思いついたものです、あなたは明らかにそれをもっといじる必要があるでしょう。また、ここでフィドルを見ることができます。

<div class="full">
    <div class="topdiv">
        <ul>
            <li class="fix">HEADER</li>
            <li>Item1</li>
            <li>Item2</li>
            <li>Item3</li>
            <li>Item4</li>
            <!-- Additional items -->
        </ul>
    </div>
</div>

.full{
    display : block;
    float : left;
    width : 500px;
}
.topdiv {
    width : 200px;
    overflow : auto;
}
ul {
    width : 1000px;
}
li {
    display : block;
    float : left;
    left : 300px;
    margin-left : 50px;
    margin-top : 25px;
}
.fix {
    position : fixed;
    left : 0px;
    margin-left : 0px;
    margin-top : 0px;
}
于 2013-03-13T22:57:18.223 に答える
0

これはいいのですが、2番目のliを動かすのが難しくなります

li:first-child {
    position:fixed;
    width:80px;
    background-color:white;

}

したがって、ヘッダーをulの外側に移動できる場合、これはより簡単な解決策です。

<style type="text/css">
* {
    margin:0; padding:0;
}
div {
    width:100%;
    white-space:nowrap;
    overflow-x:scroll;
    border:1px solid blue;
}
ul {
    list-style-type:none;
    position:relative;
    left:100px;
}
li {
    border:1px solid black;
    display:inline-block;
    width:80px;
}
span {
    position:fixed;
    overflow:hidden;
    width:80px;
    background-color:white;
    z-index:10;
}
</style>


<span>HEADER</span>
<div>
    <ul>
        <li>HEADER</li>
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
        <li>Item4</li>
        <li>Item5</li>
        <li>Item6</li>
        <li>Item7</li>
        <li>Item8</li>
        <li>Item9</li>
        <li>Item10</li>
        <li>Item11</li>
        <li>Item12</li>
        <li>Item13</li>
        <li>Item14</li>
        <li>Item15</li>
        <li>Item16</li>
        <li>Item17</li>
        <li>Item18</li>
        <li>Item19</li>
        <li>Item20</li>
        <li>Item21</li>
        <li>Item22</li>
        <li>Item23</li>
        <li>Item24</li>
        <li>Item25</li>
        <li>Item26</li>
        <li>Item27</li>
        <li>Item28</li>
        <li>Item29</li>
        <li>Item30</li>
        <li>Item31</li>
        <li>Item32</li>
        <li>Item33</li>
        <li>Item34</li>
        <li>Item35</li>
        <li>Item36</li>
        <li>Item37</li>
        <li>Item38</li>
        <li>Item39</li>
        <li>Item40</li>
        <li>Item41</li>
        <li>Item42</li>
        <li>Item43</li>
        <li>Item44</li>
        <li>Item45</li>
        <li>Item46</li>
        <li>Item47</li>
        <li>Item48</li>
        <li>Item49</li>
        <li>Item50</li>
    </ul>
</div>
于 2013-03-13T22:58:29.707 に答える