Wykryć, czy strona ma pionowy pasek przewijania?

Chcę tylko, aby jakiś prosty JQ / JS sprawdził, czy bieżąca strona / okno (a nie konkretny element) ma pionowy pasek przewijania.

Googlowanie daje mi rzeczy, które wydają się zbyt skomplikowane tylko w przypadku tej podstawowej funkcji.

Jak to zrobić?

$(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:<");
    }
});

Spróbuj tego:

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

Dzięki temu dowiesz się tylko, czy wysokość przewijania w pionie jest większa niż wysokość widocznej zawartości. hasVScrollZmienna będzie zawierać prawdziwe, czy fałszywe.

Jeśli chcesz dokładniej sprawdzić, dodaj następujący kod do powyższego kodu:

// 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");

Wypróbowałem poprzednią odpowiedź i wygląda na to, że $ ("body") nie działa. Height () niekoniecznie reprezentuje całą wysokość html.

Poprawiłem rozwiązanie w następujący sposób:

// 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:<"); 
} 

Przywróćmy to pytanie z martwych;) Jest powód, dla którego Google nie daje prostego rozwiązania. Specjalne przypadki i dziwactwa przeglądarki wpływają na obliczenia i nie jest to tak banalne, jak się wydaje.

Niestety, pojawiają się problemy z przedstawionymi tutaj rozwiązaniami. Nie chcę ich wcale dyskredytować - są świetnymi punktami wyjścia i dotykają wszystkich kluczowych właściwości potrzebnych do bardziej solidnego podejścia. Ale nie polecałbym kopiowania i wklejania kodu z innych odpowiedzi, ponieważ

• nie rejestrują efektu pozycjonowanej treści w sposób niezawodny dla różnych przeglądarek. Odpowiedzi oparte na rozmiarze ciała całkowicie to pomijają (treść nie jest przesuniętym elementem nadrzędnym takiej treści, chyba że jest pozycjonowana). A te odpowiedzi sprawdzają się $( document ).width()i .height()padają ofiarą błędnego wykrywania rozmiaru dokumentu przez jQuery .
• Poleganie na window.innerWidth, jeśli przeglądarka to obsługuje, powoduje, że kod nie wykrywa pasków przewijania w przeglądarkach mobilnych, gdzie szerokość paska przewijania wynosi zwykle 0. Są one wyświetlane tylko tymczasowo jako nakładka i nie zajmują miejsca w dokumencie . Powiększanie na telefonie komórkowym również staje się w ten sposób problemem (długa historia).
• Wykrywanie może zostać odrzucone, gdy ludzie jawnie ustawią przepełnienie zarówno elementu, jak htmli bodyna wartości inne niż domyślne (co się wtedy stanie jest trochę skomplikowane - zobacz ten opis ).
• W większości odpowiedzi wypełnienie ciała, obramowanie lub marginesy nie są wykrywane i zniekształcają wyniki.

Spędziłem więcej czasu niż sobie wyobrażałem na znalezieniu rozwiązania, które „po prostu działa” (kaszel). Algorytm mam wymyślić jest teraz częścią wtyczki, jQuery.isInView , która naraża się .hasScrollbarmetodę . Jeśli chcesz, zajrzyj do źródła .

W scenariuszu, w którym masz pełną kontrolę nad stroną i nie musisz zajmować się nieznanym CSS, użycie wtyczki może być przesadą - w końcu wiesz, które przypadki skrajne mają zastosowanie, a które nie. Jeśli jednak potrzebujesz wiarygodnych wyników w nieznanym środowisku, to nie sądzę, aby przedstawione tutaj rozwiązania były wystarczające. Lepiej jest używać dobrze przetestowanej wtyczki - mojej lub kogoś innego.

Ten zadziałał dla mnie:

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;
    }
}

Do ciała po prostu użyj hasVerticalScroll().

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

Co dziwne, żadne z tych rozwiązań nie informuje, czy strona ma pionowy pasek przewijania.

window.innerWidth - document.body.clientWidthpoda szerokość paska przewijania. To powinno działać w każdej przeglądarce IE9 + (nie testowane w mniejszych przeglądarkach). (Lub, aby ściśle odpowiedzieć na pytanie,!!(window.innerWidth - document.body.clientWidth)

Czemu? Załóżmy, że masz stronę, na której zawartość jest wyższa niż wysokość okna, a użytkownik może przewijać w górę / w dół. Jeśli używasz Chrome na komputerze Mac bez podłączonej myszy, użytkownik nie zobaczy paska przewijania. Podłącz mysz, a pojawi się pasek przewijania. (Zwróć uwagę, że to zachowanie można zastąpić, ale jest to domyślny AFAIK).

Znalazłem rozwiązanie waniliowe

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>

Ten powie ci, czy masz pasek przewijania, czy nie. Dołączyłem kilka informacji, które mogą pomóc w debugowaniu, które będą wyświetlane jako alert JavaScript.

Umieść to w tagu script, po zamykającym tagu body.

Napisałem zaktualizowaną wersję odpowiedzi Keesa C. Bakkera:

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()
}

Funkcja zwraca prawdę lub fałsz w zależności od tego, czy strona ma pionowy pasek przewijania, czy nie.

Na przykład:

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

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

używam

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

Wystarczy porównać szerokość elementu głównego dokumentu (tj. Elementu html) z wewnętrzną częścią okna:

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

Jeśli potrzebujesz również znać szerokość paska przewijania:

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

Inne rozwiązania nie działały w jednym z moich projektów i skończyło się sprawdzaniem właściwości overflow css

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

ale zadziała tylko wtedy, gdy pasek przewijania zniknie przez zmianę właściwości, nie zadziała, jeśli zawartość jest równa lub mniejsza niż okno.