Проверьте, есть ли на странице горизонтальная полоса прокрутки (компьютер и мобильные устройства)

На веб-странице мне нужно проверить, есть ли горизонтальная полоса прокрутки или нет (чтобы я программно изменил css какого-то другого элемента). Есть ли способ получить эту информацию с помощью jquery (или чистого javascript)?

я тестировал

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

но, похоже, он работает не со всеми браузерами (например, не работает с последним телефоном Samsung, который я тестировал). Мне нужно, чтобы он работал со всеми браузерами, включая последние мобильные устройства.

Спасибо!

ИЗМЕНИТЬ 1

Я тестировал решения от plalx и laconbass, тестировал IE8, Firefox, Chrome и iPad. Работает с IE, Firefox и Chrome, но не так, как я хочу на iPad.

Проблема, по-видимому, связана с функцией масштабирования на мобильных устройствах: хотя, когда я увеличиваю масштаб на iPad, появляется горизонтальная полоса прокрутки, ширина document, window и document.body не меняется (такая же проблема была и с телефоном Samsung, который я тестировал ранее). сегодня).

Вот код, который я использовал для тестирования:

<!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?


javascript html jquery scrollbar cross-browser
person Walid    schedule 19.04.2013    source источник
comment
возможный дубликат stackoverflow.com/questions/2059743/   -  person plalx    schedule 19.04.2013
comment
Я попробовал решение, предложенное в этом сообщении, работает с Chrome, но с Firefox, $("body")[0].scrollWidth и $("body")[0].clientWidth равны, даже если есть горизонтальная полоса прокрутки.   -  person Walid    schedule 20.04.2013
comment
@plalx Может быть, вопрос тот же, но, по-моему, этот вопрос намного понятнее.   -  person laconbass    schedule 20.04.2013
comment
Вы решили эту проблему?   -  person Naor    schedule 05.02.2014

Ответы (2)


arrow_upward
7
arrow_downward 

//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 не сможет прокручивать экран, если полоса прокрутки недоступна.

person Pabs123    schedule 19.04.2013
comment
функциональный, но не элегантный, ИМО - person laconbass; 19.04.2013
comment
Мне это нравится, потому что он определяет функциональность объекта, а не использует математику для теоретического определения наличия полосы прокрутки. Я думаю, что это более элегантно, на самом деле. - person mrbinky3000; 08.10.2013
comment
@ mrbinky3000 Я согласен с тем, что правильнее определять функциональность, а не теоретические расчеты. Я не согласен, что это более элегантно, элегантность - это не только особенность. Рефакторинг точно изменит мое мнение ;) - person laconbass; 05.05.2014
comment
Это решение работает, пока у меня не работает elem.get(0).scrollWidth > elem.width() в Chrome. +1 - person tponthieux; 17.06.2014
comment
Не работает для этого сайта keithclark.co.uk/articles/practical- css-parallax/ например. - person Sébastien Deprez; 01.12.2017

arrow_upward
3
arrow_downward

EDIT 2: я получил отрицательный голос, потому что это не работает ни для чего, кроме страницы, поэтому я создал общее решение на основе ответа @Pabs123, только для удовольствия:

function hasScrollX( selector ){
    var e = $(selector), fn = 'scrollLeft';
    return e[fn](1) && e[fn]() > 0 && e[fn](0) && true;
}

или даже

jQuery.fn.hasScrollX = function( ){
    var fn = 'scrollLeft';
    return this[fn](1) && this[fn]() > 0 && this[fn](0) && true;
}

См. его здесь и узнайте, как его можно легко адаптировать для обнаружения наличия вертикальной полосы прокрутки.

EDIT: протестировано и работает на chrome и firefox. Поскольку команда jQuery выполняет кроссбраузерную работу, я предлагаю использовать jQuery, а не собственный javascript.

Мне было любопытно, как сделать это элегантнее, чем предлагалось ранее (что действительно работает)

Следующее сравнение работает для меня

$(document).width() > $(window).width()

вы можете увидеть его в действии с полосой прокрутки и без него

person laconbass    schedule 19.04.2013
comment
Я вижу много ответов, реализующих это решение, но у меня оно не работает надежно в текстовой области. - person tponthieux; 17.06.2014
comment
@tponthieux Обнаружение функции прокрутки, опубликованное pabs123, должно работать в вашем случае, проверьте его. - person laconbass; 17.06.2014