ブラウザ垂直スクロールバーの高さ制限

Question

ブラウザスクロールバーをレンダリングするために取得される高さの上限には、すべてのブラウザでさまざまな値があります。限られた高さから1pxを増やすと、ブラウザのスクロールはページに表示されません。

FF

は：17895697px

IE：Chromeで10737418px

は、スクロールバーをレンダリングする問題はありませんが、それは常にレイアウトで33554400px高さを持っています。

ブラウザに基づく要素に最大画素高さreferenceがあるが、ブラウザのスクロールバーの制限のための基準は存在しません。

この高さの問題を解決する方法はありますか？つまり、制限された高さを超えたときにスクロールバーを表示する必要があります。

Answer 1

技術的にはこれはいずれかの要素が最大高さを超えない限り可能です。しかし、実用的な目的のためには、全体的な身長が限界を超えたらブラウザの動作が変わってしまうので、これは不可能です。

これは実際にはIE11でOK動作するようです：

div{ 
 
    background: red; 
 
    color: white; 
 
    height: 10737418px; 
 
} 
 

 
.blue { 
 
    background: blue; 
 
    color: white; 
 
}

<div> 
 
    Test 
 
</div> 
 
<div class="blue"> 
 
    Test 
 
</div> 
 
<div> 
 
    Test 
 
</div> 
 
<div class="blue"> 
 
    Test 
 
</div>

全4つのdiv sが適用されるCSSで表示します。単語「test」を検索すると、単語に4回スクロールします。

Firefoxでは、スクロール可能な高さが最大サイズよりも大きくなりますが、それはその下に何かをレンダリング停止します。

div{ 
 
    border: 3px solid purple; 
 
    height: 17895697px; 
 
} 
 

 
.blue { 
 
    background: blue; 
 
    color: white; 
 
} 
 

 
.red { 
 
    background: red; 
 
    color: white; 
 
}

<div> 
 
    Test 
 
</div> 
 
<div class="blue"> 
 
    Test2 
 
</div> 
 
<div class="red"> 
 
    Test3 
 
</div>

最初のボックスが3px紫の境界線を持っています。 Firefoxは下の境界線をレンダリングせず、他の2つは表示されません（div）。ブラウザーは "test"という単語がページに3回ありますが、 'Find'を使用してもページが他のdivにスクロールしません。それだけでそこに座っている。 Chromeの場合

、物事がちょうどおかしく：

div{ 
 
    border: 3px solid #000000; 
 
    background: #CCCCCC; 
 
    height: 99999999999999999999999999999999999999px; 
 
}

<div> 
 
    Test 
 
</div> 
 
<div> 
 
    Test2 
 
</div> 
 
<div> 
 
    Test3 
 
</div>

最初divは、すべての境界線を取得し、div境界線が後に何度も何度も繰り返し、何らかの理由ではありません2つだけ、他のdiv sがページ内にあるにもかかわらず、最初のdiv。 Chromeの「検索」では、「テスト」という言葉はページ内に3回しか存在しませんが、2番目の単語はページの最下部にあると認識します。 「Test」という言葉は2回目または3回目には見えません。

あなたがスクロールするように設定された固定の高さと、オーバーフローと、容器内の背の高い要素を置く場合は、他の奇妙な動作を得ます。

この問題を回避するには、ページの高さが決して限界を超えないようにするしか方法がありません。

静的コンテンツの場合は、複数のページに分割してください。

それはあなたはできる動的なコンテンツだ場合：それはどのくらいの追加ページへのリンク

場所の制限を生成する前に、ページ上に配置されてどのくらいのコンテンツ上の任意の制限を設定

• は、コンテンツは一度に表示されます

  • EX：アコーデオンレイアウトのFAQページです。回答が表示され、1つの回答のみが表示される必要があります時間

• プレースレコード/結果は、ユーザが（私はこれを試していないが、あなたがそれを行うことができれば、過去をスクロールしたコンテンツを削除/

• 表示/非崩壊を返されたどのように多くの制限でなぜそれがうまくいかないのかわかりません）。