3

この質問に対する答えは「いいえ」になると思いますが、それでよかったので、とにかく尋ねます。

私がやろうとしているのは、スクロール可能な DIV 内の要素を固定して、垂直に固定することです。これは、テーブルに固定行機能を実装するためです。

JavaScript と絶対配置を使用すると、非常に簡単に実行できます。コンテナと 3 つの内部 DIV の HTML を次に示します (ライブ バージョンについては、こちらを参照してください)。

<div id="container">
  <div id="background">
    Content
  </div>
  <div id="absolutediv">
    Absolute stays inside
  </div>
  <div id="fixeddiv">
    Fixed escapes!
  </div>
  <div id="absolutediv2">
    Stays put!
  </div>
</div>

関連する CSS:

#container {
  position: fixed;
  left: 20px;
  width: 250px;
  height: 250px;
  top: 20px;
  overflow: scroll;
}

#absolutediv {
  position: absolute;
  top: 30px;
  width: 300px;
  background-color: #CEC;
}

#fixeddiv {
  position: fixed;
  top: 100px;
  width: 300px;
  background-color: #ECC;
}

#absolutediv2 {
  position: absolute;
  width: 300px;
  top: 120px;
  background-color: #ECC;
}

そして、#absolutediv2 を所定の位置に保持する JavaScript:

var div = document.getElementById('absolutediv2');
var container = document.getElementById('container');

container.addEventListener('scroll', function() {
  div.style.top = container.scrollTop + 120 + 'px';
});

だから #absolutediv2 は私が望むように動作しています。しかし、#fixeddiv を見てください。これは私が求めているものに近いものであり、ブラウザーがスクリプトの実行を待たずに保持できるため、モバイル デバイスでの見栄えが良くなると思います。ただし、(a) 境界を越えて実行され、(b) 水平方向にスクロールしません。

純粋な CSS を使用して、モバイル ブラウザーで適切に動作するものを取得する方法はありますか?

(私のページでは、これを行う 1 つの方法は、コンテナー DIV の上に固定された行を配置することですが、固定された行の数は、ユーザーがスクロールした場所に応じて変化します。つまり、コンテナー DIV は移動する必要があります。)

編集：

要約すると、次のような div が必要です。

  1. コンテナごと水平スクロール
  2. コンテナが垂直方向にスクロールしても動かない
  3. コンテナに属しているようです
  4. モバイルブラウザで見栄えが良い

最後の 1 つはトリッキーなビットです。絶対位置の div と JavaScript を使用して 1 番、2 番、3 番を実現できますが、モバイル ブラウザーではラグが発生するため見苦しくなります。固定位置の div を使用すると、#2 と #4 を取得でき、JavaScript で #1 を達成できます (水平方向のラグはそれほど気になりません) が、#3 は達成できません。そのコンテナの上に。

Google にはこの種の提案がありますが、これはかなり極端な解決策です: https://developers.google.com/mobile/articles/webapp_fixed_ui

4

2 に答える 2

2

わかりました、私はこれをテストしていませんが、正しい軌道に沿っているはずです。基本的に、これにより、私が作成した HTML5 データ属性を使用して複数の「ステッカー」アイテムを作成することができますdata-special="sticker"。jQuery はこれらを検索し、データをコピーして、元の<div>要素があった場所に配置された別の要素に追加し、元の要素を非表示にします。

#container {
    position: fixed;
    left: 20px;
    width: 250px;
    height: 250px;
    top: 20px;
    overflow: scroll;
}

#original-element {
    position: absolute;
    top: 30px;
    width: 300px;
    background-color: #CEC;
}

.sticker {
    position:absolute;
}    

<div id="wrapper">
    <div id="container">
        <div id="background">
           Content
        </div>
        <div id="original-element" data-special="sticker">
           I want to stay put!
        </div>
    </div>
</div>

$("[data-special='sticker']").each(function () {
    $('#wrapper').append(
        $('<div/>').html($(this).html())
                   .addClass("sticker")
                   .css('top', parseInt($('#container').css('top')) + parseInt($(this).css('top')))
                   .css('left', $('#container').css('left'))
                   .css('width', $('#container').css('width'))
                   .css('background-color', $(this).css('background-color'))
    );
    $(this).css('display', "none");
});

また、これの欠点の1つは、元の要素が非表示になると、元の要素が占めていたスペースが折りたたまれることです...その解決策をブレインストーミングしてみます.

編集：

#container元の要素がコンテナーよりも大きいため、元の要素の幅ではなく幅を取得するように JS を変更しました。

編集：

テスト済み: jsfiddle

いくつかの問題は、要素がスクロールバーにも重なるということです。その幅がわかっている場合は、値から引くことができます。

上記の更新されたコードも確認してください。多少の誤差はありました...

于 2013-05-08T16:50:27.377 に答える
1

次の投稿をご覧ください。

この回答で説明されているように：

スクリプトを使用しない代替手段はposition: sticky、Chrome、Firefox、および Safari でサポートされている です。HTML5Rocks とデモに関する記事、および Mozilla docsを参照してください。

今日の時点で、リンクされたデモは Firefox では機能しますが、Chrome では機能しません。

于 2017-01-10T17:12:39.703 に答える