今日のフロントエンド ページ、特にモバイル デバイスでは、ページのスライド後に
「返信トピック」モジュールはページのフローティングに従い、常にページの下部で停止します。コード構造は次のとおりです。
このような機能を実現するには、当然、position:fixed を使用する必要があります。ただし、position: fix の使用にはバグがあります。例として、下部のフローティング
上の左側が問題のある表示、右側が正常な表示です。では、この問題をどうやって解決すればよいでしょうか?ここで、より良い方法を模索したいと考えて、私の意見を3つ述べさせていただきます。
方法 1. Javasrript ソリューション
js を使用して問題を解決します。スライダーがページ コンテンツの下部にスライドしたときに、本来ドキュメント フローから外れる固定位置を、ドキュメント フローから外れない相対位置に変更します。
スクリプトを使用して問題を解決するのは最も困難な方法です。CSS で解決できる場合はスクリプトを使用しないようにしてください。ただし、それでも方法です。
Return document.body.clientHeight;
}
//ブラウザのビューポートの高さ
function getWindowHeight(){
var windowHeight = 0;
if(document.compatMode == "CSS1Compat")
{
windowHeight = document.documentElement.clientHeight;
}
else
{
🎜 > Return windowHeight;
}
//スライド監視
window.onscroll = function(){
//下にスライドすると、
html タグに padding-bottom 属性を追加し、通常のドキュメント フローのコンテンツが本文の下部から padding-bottom で設定された距離になるようにします。
欠点は、モジュールの再利用と、プロジェクトの起動後に頻繁に CSS ファイルをマージする必要があることを考慮すると、他のページがこのフローティング ブロックを必要としない場合、
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
