JoomlaでWebページをデザインしています!そして、ページが水平にスクロールする原因となる要素が表示されないという問題に遭遇しました。
私はjsとjQueryではまったく役に立たないので、幅が特定の値よりも大きいかブラウザウィンドウよりも大きいすべての要素をコンソールに出力するスクリプトを手伝ってくれる人はいますか? または、ブラウザを水平方向にスクロールさせる要素を他の方法で見つけることができますか?
私は 1 行のコンソール スクリプトを好みますが、.js ファイルでも構いません。
私にとって助けになったのはランニングでした
$("body *").each(function() {
$(this).css('background-color', 'red');
});
コンソールで。これは、ドキュメントの幅がウィンドウの幅を超えて拡大する原因となった要素を特定するのに役立ちました。私の場合、要素がドキュメントの外側から移動していました (こんにちは、おしゃれなウェブサイト)。つまり、ウィンドウの幅より広い要素は 1 つもありませんでした。それらは単に通常の境界の外に配置されています。
私はすでに を使用していたので<meta name="viewport" content="width=device-width, initial-scale=1.0">
、最終的にこの CSS を追加しました。
body {
overflow-x: hidden;
}
使った
var outOfScreen = $('*').filter(function(){if($(this).width()>$(window).width())return true})
outOfScreen
そのため、 varにアクセスしてコレクション全体を調べることができました。