Тествайте дали страницата има хоризонтална лента за превъртане (компютър и мобилни устройства)

На уеб страница трябва да тествам дали има хоризонтална лента за превъртане или не (така че програмно да променя 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 Може би въпросът е същият, но IMO е много по-ясен този   -  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
функционален, но не и елегантен, IMO - 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

РЕДАКТИРАНЕ 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;
}

Вижте го тук и как може лесно да се адаптира за откриване на присъствие на вертикална лента за превъртане.

РЕДАКТИРАНЕ: Тествано и работещо в 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