JavaScript でブラウザのスクロールバーの寸法を取得する
Web 開発では、スクロールバーの寸法を決定することは、美的および機能的な目的で重要な場合があります。 JavaScript は、この情報を取得する多目的な方法を提供し、開発者が UI 要素を調整してユーザー エクスペリエンスを向上できるようにします。
水平スクロールバーの高さの決定
水平スクロールバーの高さを取得するにはスクロールバー、JavaScript は多面的な機能を利用しますアプローチ:
function getHorizontalScrollbarHeight() { var inner = document.createElement('p'); inner.style.width = "100%"; inner.style.height = "200px"; var outer = document.createElement('div'); outer.style.position = "absolute"; outer.style.top = "0px"; outer.style.left = "0px"; outer.style.visibility = "hidden"; outer.style.width = "200px"; outer.style.height = "150px"; outer.style.overflow = "hidden"; outer.appendChild(inner); document.body.appendChild(outer); var w1 = inner.offsetWidth; outer.style.overflow = 'scroll'; var w2 = inner.offsetWidth; if (w1 == w2) w2 = outer.clientWidth; document.body.removeChild(outer); return (w1 - w2); }
垂直スクロールバーの幅の決定
同様に、垂直スクロールバーについては、以下の JavaScript コードが信頼できるソリューションを提供します。
function getVerticalScrollbarWidth() { var inner = document.createElement('p'); inner.style.height = "100%"; inner.style.width = "200px"; var outer = document.createElement('div'); outer.style.position = "absolute"; outer.style.top = "0px"; outer.style.left = "0px"; outer.style.visibility = "hidden"; outer.style.width = "150px"; outer.style.height = "200px"; outer.style.overflow = "hidden"; outer.appendChild(inner); document.body.appendChild(outer); var w1 = inner.offsetHeight; outer.style.overflow = 'scroll'; var w2 = inner.offsetHeight; if (w1 == w2) w2 = outer.clientHeight; document.body.removeChild(outer); return (w1 - w2); }
これらの JavaScript 関数を活用することで、開発者はブラウザのスクロールバーの寸法を正確に取得でき、UI を正確に制御できるようになります。デザインと機能性。
以上がJavaScript を使用してブラウザのスクロールバーの寸法を取得する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。