ページに垂直スクロールバーがあるかどうかを検出しますか？

単純なJQ / JSで、現在のページ/ウィンドウ（特定の要素ではない）に垂直スクロールバーがあるかどうかを確認したいだけです。

グーグルを使用すると、この基本的な機能だけでは複雑すぎるように見えることがあります。

これはどのように行うことができますか？

$(document).ready(function() {
    // Check if body height is higher than window height :)
    if ($("body").height() > $(window).height()) {
        alert("Vertical Scrollbar! D:");
    }

    // Check if body width is higher than window width :)
    if ($("body").width() > $(window).width()) {
        alert("Horizontal Scrollbar! D:<");
    }
});

これを試して：

var hasVScroll = document.body.scrollHeight > document.body.clientHeight;

ただし、これは、垂直のscrollHeightが表示可能なコンテンツの高さよりも大きい場合にのみ通知します。hasVScroll変数は、trueまたはfalseが含まれます。

より完全なチェックを行う必要がある場合は、上記のコードに以下を追加します。

// Get the computed style of the body element
var cStyle = document.body.currentStyle||window.getComputedStyle(document.body, "");

// Check the overflow and overflowY properties for "auto" and "visible" values
hasVScroll = cStyle.overflow == "visible" 
             || cStyle.overflowY == "visible"
             || (hasVScroll && cStyle.overflow == "auto")
             || (hasVScroll && cStyle.overflowY == "auto");

私は以前の答えを試してみましたが、$（ "body"）。height（）が機能していないようで、必ずしもHTML全体の高さを表しているわけではありません。

私は次のように解決策を修正しました：

// Check if body height is higher than window height :) 
if ($(document).height() > $(window).height()) { 
    alert("Vertical Scrollbar! D:"); 
} 

// Check if body width is higher than window width :) 
if ($(document).width() > $(window).width()) { 
    alert("Horizontal Scrollbar! D:<"); 
} 

この質問を復活させましょう;）Googleが簡単な解決策を提供しないのには理由があります。特殊なケースやブラウザの癖が計算に影響を及ぼし、見かけほど簡単ではありません。

残念ながら、これまでに説明したソリューションには問題があります。それらを非難するつもりはありません。これらは優れた出発点であり、より堅牢なアプローチに必要なすべての主要なプロパティに触れます。しかし、他の回答からコードをコピーして貼り付けることはお勧めしません。

• 信頼できるクロスブラウザーである方法で配置されたコンテンツの効果をキャプチャしません。ボディサイズに基づく回答はこれを完全に逃します（ボディは、それ自体が配置されない限り、そのようなコンテンツのオフセットされた親ではありません）。そして、それらはチェックの答えで$( document ).width()あり.height()、jQueryによるドキュメントサイズのバグのある検出の犠牲になります。
• に依存しているwindow.innerWidth場合、ブラウザーがそれをサポートしていると、コードはモバイルブラウザーでのスクロールバーの検出に失敗します。スクロールバーの幅は通常0です。これらは一時的にオーバーレイとして表示されるだけで、ドキュメント内のスペースを占有しません。 。モバイルでのズームもそのように問題になります（長い話）。
• htmlとbody要素の両方のオーバーフローをデフォルト以外の値に明示的に設定すると、検出がスローされます（その場合の動作は少し複雑です- この説明を参照してください）。
• ほとんどの回答では、ボディパディング、境界線、またはマージンは検出されず、結果を歪めます。

「うまくいく」（咳）解決策を見つけるために、想像以上に多くの時間を費やしました。私が思いついたアルゴリズムは現在、メソッドを公​​開するプラグインjQuery.isInViewの一部です。.hasScrollbar。顔をしているソースであなたが望むなら。

ページを完全に制御していて、不明なCSSを処理する必要がないシナリオでは、プラグインを使用するのはやり過ぎかもしれません。ただし、未知の環境で信頼できる結果が必要な場合は、ここで概説されているソリューションでは十分ではないと思います。十分にテストされたプラグインを使用するほうがよいです-私または他の誰か。

これは私にとってはうまくいきました：

function hasVerticalScroll(node){
    if(node == undefined){
        if(window.innerHeight){
            return document.body.offsetHeight> window.innerHeight;
        }
        else {
            return  document.documentElement.scrollHeight > 
                document.documentElement.offsetHeight ||
                document.body.scrollHeight>document.body.offsetHeight;
        }
    }
    else {
        return node.scrollHeight> node.offsetHeight;
    }
}

本体はそのままご使用くださいhasVerticalScroll()。

var hasScrollbar = window.innerWidth > document.documentElement.clientWidth;

奇妙なことに、これらのソリューションはいずれも、ページに垂直スクロールバーがあるかどうかを教えてくれません。

window.innerWidth - document.body.clientWidthスクロールバーの幅を与えます。これはすべてのIE9 +で動作するはずです（これよりも小さなブラウザーではテストされていません）。（または質問に厳密に答えるために、!!(window.innerWidth - document.body.clientWidth)

どうして？たとえば、コンテンツがウィンドウの高さよりも高く、ユーザーが上下にスクロールできるページがあるとします。マウスが接続されていないMacでChromeを使用している場合、ユーザーにはスクロールバーが表示されません。マウスを接続すると、スクロールバーが表示されます。（この動作はオーバーライドできますが、これはデフォルトのAFAIKです）。

私はバニラの解決策を見つけました

var hasScrollbar = function() {
  // The Modern solution
  if (typeof window.innerWidth === 'number')
    return window.innerWidth > document.documentElement.clientWidth

  // rootElem for quirksmode
  var rootElem = document.documentElement || document.body

  // Check overflow style property on body for fauxscrollbars
  var overflowStyle

  if (typeof rootElem.currentStyle !== 'undefined')
    overflowStyle = rootElem.currentStyle.overflow

  overflowStyle = overflowStyle || window.getComputedStyle(rootElem, '').overflow

    // Also need to check the Y axis overflow
  var overflowYStyle

  if (typeof rootElem.currentStyle !== 'undefined')
    overflowYStyle = rootElem.currentStyle.overflowY

  overflowYStyle = overflowYStyle || window.getComputedStyle(rootElem, '').overflowY

  var contentOverflows = rootElem.scrollHeight > rootElem.clientHeight
  var overflowShown    = /^(visible|auto)$/.test(overflowStyle) || /^(visible|auto)$/.test(overflowYStyle)
  var alwaysShowScroll = overflowStyle === 'scroll' || overflowYStyle === 'scroll'

  return (contentOverflows && overflowShown) || (alwaysShowScroll)
}

    <script>
    var scrollHeight = document.body.scrollHeight;
    var clientHeight = document.documentElement.clientHeight;
    var hasVerticalScrollbar = scrollHeight > clientHeight;

    alert(scrollHeight + " and " + clientHeight); //for checking / debugging.
    alert("hasVerticalScrollbar is " + hasVerticalScrollbar + "."); //for checking / debugging.
    </script>

これはスクロールバーがあるかどうかを教えてくれます。JavaScriptアラートとして表示されるデバッグに役立つ可能性のあるいくつかの情報を含めました。

これを、body終了タグの後のスクリプトタグに挿入します。

Kees C. Bakkerの回答の更新版を書きました。

const hasVerticalScroll = (node) => {
  if (!node) {
    if (window.innerHeight) {
      return document.body.offsetHeight > window.innerHeight
    }
    return (document.documentElement.scrollHeight > document.documentElement.offsetHeight)
      || (document.body.scrollHeight > document.body.offsetHeight)
  }
  return node.scrollHeight > node.offsetHeight
}

if (hasVerticalScroll(document.querySelector('body'))) {
  this.props.handleDisableDownScrollerButton()
}

この関数は、ページに垂直スクロールバーがあるかどうかに応じて、trueまたはfalseを返します。

例えば：

const hasVScroll = hasVerticalScroll(document.querySelector('body'))

if (hasVScroll) {
  console.log('HAS SCROLL', hasVScroll)
}

私が使う

public windowHasScroll()
{
    return document.body.clientHeight > document.documentElement.clientHeight;
}

ドキュメントルート要素（つまり、html要素）の幅をウィンドウの内側部分と比較するだけです。

if ((window.innerWidth - document.documentElement.clientWidth) >0) console.log('V-scrollbar active')

スクロールバーの幅も知る必要がある場合：

vScrollbarWidth = window.innerWidth - document.documentElement.clientWidth;

他のソリューションが私のプロジェクトの1つで機能せず、オーバーフローのcssプロパティをチェックしてしまう

function haveScrollbar() {
    var style = window.getComputedStyle(document.body);
    return style["overflow-y"] != "hidden";
}

ただし、小道具を変更してスクロールバーが消えたように見える場合にのみ機能します。コンテンツがウィンドウ以下の場合は機能しません。