Deteksi apakah halaman memiliki scrollbar vertikal?

Saya hanya ingin beberapa JQ / JS sederhana untuk memeriksa apakah halaman / jendela saat ini (bukan elemen tertentu) memiliki scrollbar vertikal.

Googling memberi saya hal-hal yang tampaknya terlalu rumit hanya untuk fitur dasar ini.

Bagaimana ini bisa dilakukan?

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

coba ini:

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

Namun, ini hanya akan memberi tahu Anda jika scrollHeight vertikal lebih besar dari tinggi konten yang dapat dilihat. The hasVScrollvariabel akan berisi benar atau salah.

Jika Anda perlu melakukan pemeriksaan yang lebih menyeluruh, tambahkan yang berikut ini ke kode di atas:

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

Saya mencoba jawaban sebelumnya dan tampaknya tidak berhasil, $ ("body"). Height () tidak selalu mewakili tinggi html secara keseluruhan.

Saya telah mengoreksi solusinya sebagai berikut:

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

Mari kita kembalikan pertanyaan ini dari kematian;) Ada alasan mengapa Google tidak memberi Anda solusi sederhana. Kasus khusus dan kebiasaan browser memengaruhi penghitungan, dan ini tidak semudah yang terlihat.

Sayangnya, sejauh ini ada masalah dengan solusi yang diuraikan di sini. Saya tidak bermaksud untuk meremehkan mereka sama sekali - mereka adalah titik awal yang bagus dan menyentuh semua properti utama yang diperlukan untuk pendekatan yang lebih kuat. Tetapi saya tidak akan merekomendasikan untuk menyalin dan menempelkan kode dari jawaban lain karena

• mereka tidak menangkap efek konten yang diposisikan dengan cara yang dapat diandalkan lintas-browser. Jawaban yang didasarkan pada ukuran tubuh melewatkan ini sepenuhnya (tubuh tidak offset induk dari konten tersebut kecuali jika diposisikan sendiri). Dan jawaban itu memeriksa $( document ).width()dan .height()menjadi mangsa deteksi buggy jQuery tentang ukuran dokumen .
• Mengandalkan window.innerWidth, jika browser mendukungnya, membuat kode Anda gagal mendeteksi bilah gulir di peramban seluler, yang umumnya lebar bilah gulir 0. Mereka hanya ditampilkan sementara sebagai hamparan dan tidak memakan ruang di dokumen . Melakukan zoom pada ponsel juga menjadi masalah (cerita panjang).
• Deteksi dapat dilakukan ketika orang secara eksplisit mengatur luapan elemen htmldan bodyke nilai non-default (yang terjadi kemudian adalah sedikit terlibat - lihat deskripsi ini ).
• Dalam kebanyakan jawaban, body padding, border atau margin tidak terdeteksi dan mengubah hasil.

Saya telah menghabiskan lebih banyak waktu daripada yang saya bayangkan untuk menemukan solusi yang "langsung bekerja" (batuk). Algoritma yang saya buat sekarang menjadi bagian dari plugin, jQuery.isInView , yang mengekspos sebuah .hasScrollbarmetode . Lihat sumbernya jika Anda mau.

Dalam skenario di mana Anda memiliki kendali penuh atas halaman dan tidak harus berurusan dengan CSS yang tidak dikenal, menggunakan plugin mungkin berlebihan - lagipula, Anda tahu kasus edge mana yang berlaku, dan mana yang tidak. Namun, jika Anda memerlukan hasil yang andal di lingkungan yang tidak diketahui, saya rasa solusi yang diuraikan di sini tidak akan cukup. Anda lebih baik menggunakan plugin yang telah teruji - milik saya atau orang lain.

Yang ini berhasil untuk saya:

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

Untuk bodi, pakai saja hasVerticalScroll().

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

Anehnya, tidak ada solusi ini yang memberi tahu Anda jika halaman memiliki scrollbar vertikal.

window.innerWidth - document.body.clientWidthakan memberi Anda lebar scrollbar. Ini harus bekerja di IE9 + apa pun (tidak diuji di browser yang lebih rendah). (Atau untuk menjawab pertanyaan dengan tegas,!!(window.innerWidth - document.body.clientWidth)

Mengapa? Misalkan Anda memiliki halaman di mana konten lebih tinggi dari tinggi jendela dan pengguna dapat menggulir ke atas / bawah. Jika Anda menggunakan Chrome di Mac tanpa tetikus yang terpasang, pengguna tidak akan melihat bilah gulir. Colokkan mouse dan scrollbar akan muncul. (Perhatikan perilaku ini dapat diganti, tapi itulah AFAIK default).

Saya menemukan solusi vanila

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>

Yang ini akan memberi tahu Anda apakah Anda memiliki scrollbar atau tidak. Saya telah menyertakan beberapa informasi yang dapat membantu debugging, yang akan ditampilkan sebagai peringatan JavaScript.

Letakkan ini di tag skrip, setelah tag body penutup.

Saya menulis versi terbaru dari jawaban 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()
}

Fungsi mengembalikan true atau false tergantung apakah halaman memiliki scrollbar vertikal atau tidak.

Sebagai contoh:

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

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

saya menggunakan

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

Cukup bandingkan lebar elemen root dokumen (yaitu elemen html) dengan bagian dalam jendela:

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

Jika Anda juga perlu mengetahui lebar scrollbar:

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

Solusi lain tidak berfungsi di salah satu proyek saya dan saya akhirnya memeriksa properti overflow css

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

tetapi hanya akan berfungsi jika scrollbar muncul menghilang dengan mengubah prop itu tidak akan berfungsi jika konten sama atau lebih kecil dari jendela.