4

私はこのトリッキーなCSSの問題を抱えています：私はこのHTMLを持っています：

<div id="wrapper">
    <div class="left"></div>

    <div id="scroll">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque faucibus volutpat turpis at iaculis. Proin at nisl leo. Morbi nec blandit leo? Pellentesque interdum nunc sed nisl rhoncus gravida. Nunc sollicitudin, mi sit amet porta mollis, metus erat ornare odio, eu accumsan mauris diam nec augue. Ut tincidunt dui at lorem consequat vitae consectetur sapien pharetra. Suspendisse potenti. Donec turpis enim, varius accumsan congue vitae, rhoncus ut justo. Curabitur tristique lobortis eros ut pharetra. Maecenas non condimentum justo. Integer tincidunt; velit quis auctor varius, magna lorem pharetra urna, eget pellentesque leo nibh at mi. Ut pretium bibendum dui vel venenatis. Proin vel sem vitae lacus tincidunt bibendum. Pellentesque blandit mauris sit amet mauris sollicitudin pretium. In molestie condimentum nisi placerat consequat.
    </div>

    <div class="right"></div>
</div>

このCSSで：

#wrapper {
    position: relative;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    height: 47px;
}

#scroll {
    position: relative;
    height: 100%;
    width: 10000px;
}

div.left, div.right {
    position: absolute;
    display: block;
    background-color: rgba(255, 0, 0, 0.5);
    width: 24px;
    height: 100%;
    z-index: 100;
    top: 0;
}

div.left {
    left: 0;
}

div.right {
    right: 0;
}

そして視覚的な結果はこれです： ここに画像の説明を入力してください

何らかの理由で、div.rightをスクロールするとが動いてい#scrollます。常にの境界に浮かびたい#wrapper。

これは私が今得ているものです： ここに画像の説明を入力してください

これがjsfiddleです：http：//jsfiddle.net/b5fYH/

ありがとうございました

編集

明らかではなかったという理由だけで、モバイルデバイスで動作する必要があります。

4

2 に答える 2

5

と の違いを知っておく必要がposition: absoluteありposition: fixedます。

最初のものは、要素を相対要素内の絶対位置に配置し、その場所に（相対的に）保持することを意味します。

2 番目:ウィンドウ(フレーム)内の絶対位置に要素を配置し、何が起こってもそこに保持します。

このフィドルを確認してください：http://jsfiddle.net/b5fYH/1/

于 2013-03-11T21:05:13.053 に答える
3

問題は、overflow-x がラッパー div の幅を変更する方法にあります。

私が見つけた解決策は次のとおりです。

デモ: http://jsfiddle.net/5jWpG/

  1. ID wrapper-container を持つ新しい div で全体をラップする

  2. 次に、次の CSS コードを追加します。

    #wrapper-container {
    position: relative;
}

#wrapper {
    position: static; /* or remove position relative from your code */
}

div.left, div.right {
    bottom: 16px; 
    height: auto; /* or remove height: 100% from your code */
}
于 2013-03-11T21:16:58.190 に答える