5

Web ページで、水平スクロールバーがあるかどうかをテストする必要があります (プログラムで他の要素の css を変更するため)。jquery (または純粋な javascript) を使用してその情報を取得する方法はありますか?

テストしました

function isHorizontalScrollbarEnabled() {
    return $(document).width()!=$(window).width();
}

ただし、すべてのブラウザで動作するわけではないようです (たとえば、最近テストした Samsung の携帯電話では動作しません)。最近のモバイル デバイスを含むすべてのブラウザーで動作する必要があります。

ありがとうございました！

編集1

plalx と laconbass が提供するソリューションをテストし、IE8、Firefox、Chrome、iPad をテストしました。IE、Firefox、Chrome で動作しますが、iPad では思い通りに動作しません。

この問題は、モバイル デバイスのズーム機能に関連しているようです。ただし、iPad でズームインすると、水平スクロールバーが表示され、幅documentが変化しません (今日テストした Samsung の電話でも同じ問題でした)。windowdocument.body

テストに使用したコードは次のとおりです。

<!DOCTYPE html>
<html lang="en">
    <head>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
      <title>test</title>
    </head>

    <body>
      <div style="width: 500px; background: red;" id="test">click here to test</div>
      <script type="text/javascript">
        var i = 1;
        $("#test").click(function(){
          $(this).html("Test #" + (i++) 
    + "<br>document width=" + $(document).width() + ", windows width=" + $(window).width()
    + "<br>document width=" + $(document).width() + ", body width=" + $(document.body).width()
          );  
        });     
      </script>
    </body>
</html>

iPadのようなモバイルデバイスでズームイン/ズームアウトした後にも機能する水平スクロールバーの存在を検出する方法はありますか?

4

2 に答える 2

7 
//scrol 1px to the left
$(document).scrollLeft(1);

if($(document).scrollLeft() != 0){
   //there's a scroll bar
}else{
   //there's no scrollbar
}

//scroll back to original location
$(document).scrollLeft(0);

スクロールバーが利用できない場合、JQueryは画面をスクロールできないため、これは機能します

于 2013-04-19T19:58:46.767 に答える