2

Snap.js に適したレイアウトを見つけようとしています。

http://jakiestfu.github.io/Snap.js/demo/apps/default.html

推奨される HTML / CSS の問題点は次のとおりです。

  1. ヘッダー (ナビゲーション バー) が固定されない
  2. メイン コンテンツを下にスクロールしても、Chrome for Android でアドレス バーが非表示にならない
  3. サイドバーがアドレスバーと同期して動かない問題を修正
  4. 私の以下のフィドルでは、メインコンテンツは右に移動している間、少し (?!) v-scrollable です

  1. ヘッダーを固定したいのですが、コンテンツ領域とともに垂直方向にスクロールする必要があります。CSS はこれをサポートしていないようです。そのため、スクリプト化されたソリューションを試しました。

    animate();

function animate() {
    requestAnimFrame(animate);
    draw();
}

function draw(){
    var pos = content.offset();
    nav.css('transform', 'translateX('+ pos.left +'px)');
}

    http://jsfiddle.net/HFjU6/2533/

    他に選択肢があれば教えてください。JS を無効にすると UI が壊れるのではないかと心配です。

  1. アドレス バーを非表示にする (別名「フルスクリーン モード」) には、 content を作成する必要がありましたposition: static;。

    欠点: v-scrollbar は、コンテンツ領域の右側ではなく、ウィンドウの右側の境界に表示されます。別の方法はありますか？

  1. のサイドバーはposition: fixed、高すぎるコンテンツが含まれている場合、メイン コンテンツから独立してスクロールできます。

    問題: それらはアドレス バーと一緒に移動しませんが、アドレス バーが完全になくなると再配置されます (Chrome for Android の標準的な動作は、スワイプに固執するアドレス バーと同期してコンテンツを移動することです)素敵なトランジションのための入力）。

    で動作しますがposition: absolute;、それによりサイドバーがメイン コンテンツと共にスクロールし、元の高さの 100% 未満の本文の背景が表示されます。

  1. メイン コンテンツ エリアを少し左にスクロールすると、右に移動してレイアウトが崩れます (タッチ デバイスにのみ適用される可能性がありますが、マウスの中央ボタンをパンに使用する場合はデスクトップにも適用される可能性があります)。なぜこうなった？
4

0 に答える 0