Bagaimana saya dapat memeriksa apakah bilah gulir terlihat?


277

Apakah mungkin untuk memeriksa overflow:autodiv?

Sebagai contoh:

HTML

<div id="my_div" style="width: 100px; height:100px; overflow:auto;" class="my_class"> 
  * content
</div>

JQUERY

$('.my_class').live('hover', function (event)
{
    if (event.type == 'mouseenter')
    {
         if( ...  if scrollbar visible ? ... )
         {
            alert('true'):
         }
         else
         {
            alert('false'):
         }
    }

});

Terkadang isinya singkat (tidak ada scrollbar) dan terkadang panjang (scrollbar terlihat).

Jawaban:


376

plugin kecil untuk itu.

(function($) {
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > this.height();
    }
})(jQuery);

gunakan seperti ini,

$('#my_div1').hasScrollBar(); // returns true if there's a `vertical` scrollbar, false otherwise..

diuji bekerja pada Firefox, Chrome, IE6,7,8

tetapi tidak berfungsi dengan benar pada bodypemilih tag

demo


Edit

Saya menemukan bahwa ketika Anda memiliki scrollbar horizontal yang menyebabkan scrollbar vertikal muncul, fungsi ini tidak berfungsi ....

Saya menemukan solusi lain ... gunakan clientHeight

return this.get(0).scrollHeight > this.get(0).clientHeight;

22
Jika Anda memiliki padding, Anda perlu menggunakan > this.innerHeight(); jsfiddle.net/p3FFL/210
jcubic

2
Ada masalah dengan ini, jika bilah gulir horizontal juga ada, maka ini akan kembali salah bahkan jika bilah gulir vertikal ada sampai tingginya telah menyusut oleh ketinggian bilah gulir horizontal.
Ally

mengapa Anda mendefinisikan fungsi yang sama dua kali? @jcubic
Nitin Sawant

9
Perhatikan bahwa pada Mac, bilah gulir melayang di atas konten dan menghilang saat tidak digunakan. Di Windows selalu terlihat dan membutuhkan ruang horizontal. Oleh karena itu, hanya karena konten dapat digulir (yang dideteksi oleh fungsi ini) tidak berarti bilah gulir selalu ada.
Andrew

2
(function ($) {$ .fn.hasScrollBar = function () {return this.get (0) .scrollWidth> this.width); }}) (jQuery); ini berfungsi untuk overfolow horisontal. Bagus untuk memeriksa respons seluler di situs web di iframe.
Alexander Nicholas Popa

57

Mungkin solusi yang lebih sederhana.

if ($(document).height() > $(window).height()) {
    // scrollbar
}

Jawaban ini berhasil bagi saya setelah memeriksa apakah DOM siap menggunakan JQuery.ready()
Simple Sandman

4
Ini mengasumsikan scrollbar ada di jendela dan bukan elemen div. Usulkan mengubah referensi untuk menyarankan: "Jika Anda hanya perlu menguji scrollbar di jendela utama, Anda dapat mencoba:"
justdan23

43

Anda dapat melakukan ini menggunakan kombinasi atribut Element.scrollHeightdan Element.clientHeight.

Menurut MDN:

The Element.scrollHeight read-only atribut adalah pengukuran ketinggian konten elemen, termasuk konten tidak terlihat di layar karena kebanjiran. Nilai scrollHeight sama dengan client minimum. Tinggi elemen akan diperlukan agar sesuai dengan semua konten di sudut pandang tanpa menggunakan scrollbar vertikal. Ini termasuk elemen padding tetapi tidak marginnya.

Dan:

Properti read-only Element.clientHeight mengembalikan ketinggian bagian dalam elemen dalam piksel, termasuk padding tetapi tidak tinggi scrollbar horizontal, perbatasan, atau margin.

clientHeight dapat dihitung sebagai tinggi CSS + padding CSS - ketinggian scrollbar horizontal (jika ada).

Oleh karena itu, elemen akan menampilkan bilah gulir jika ketinggian gulir lebih besar dari tinggi klien, jadi jawaban untuk pertanyaan Anda adalah:

function scrollbarVisible(element) {
  return element.scrollHeight > element.clientHeight;
}

2
contoh: github.com/twbs/bootstrap/blob/master/js/modal.js#L242 dan +1 untuk kutipan dan penjelasan MDN!
lowtechsun

di chrome jika konten berbatasan dengan yang tidak termasuk dalam scrollHeight
AT

1
Dipilih untuk tidak menggunakan dan menggunakan kerangka / pustaka.
John

Hati-hati - ini menyebabkan reflow, yang menguras kinerja. gist.github.com/paulirish/5d52fb081b3570c81e3a
Todd Sjolander

43

Saya harus mengubah sedikit dari apa yang dikatakan Reigel:

(function($) {
    $.fn.hasScrollBar = function() {
        return this[0] ? this[0].scrollHeight > this.innerHeight() : false;
    }
})(jQuery);

innerHeight menghitung tinggi kontrol dan bantalan atas dan bawahnya


return (this.get (0))? this.get (0) .scrollHeight> this.innerHeight (): false;
commonpike

3
Saya pikir ini harus ditetapkan sebagai jawaban yang benar. Ini berfungsi pada FF35, IE11 dan Chrome39.
LucasBr

Itu tidak memeriksa nilai 'melimpah' untuk memastikan bilah gulir akan muncul ketika kondisi scrollHeight terpenuhi.
BT

1
@ Bt Tapi jika saya memiliki overflow diatur ke otomatis di css saya, maka saya tidak perlu pemeriksaan tambahan ini? Ini membandingkan ukuran dan itu cukup ...?
Andrew

Jawaban yang hanya berfungsi untuk Anda bukanlah jawaban .. bagaimana Anda tahu apa yang orang lain miliki di css mereka? Jawaban Anda tidak menyebutkan batasan itu. Jika seseorang tidak dapat menjatuhkan jawaban Anda dan membuatnya bekerja, itu bukan jawaban yang baik.
BT

27

Ini berkembang pada jawaban @ Reigel. Ini akan mengembalikan jawaban untuk scrollbar horizontal atau vertikal.

(function($) {
    $.fn.hasScrollBar = function() {
        var e = this.get(0);
        return {
            vertical: e.scrollHeight > e.clientHeight,
            horizontal: e.scrollWidth > e.clientWidth
        };
    }
})(jQuery);

Contoh:

element.hasScrollBar()             // Returns { vertical: true/false, horizontal: true/false }
element.hasScrollBar().vertical    // Returns true/false
element.hasScrollBar().horizontal  // Returns true/false


8

Saya membuat kustom baru: pemilih semu untuk jQuery untuk menguji apakah suatu item memiliki salah satu properti css berikut:

  1. overflow: [gulir | otomatis]
  2. overflow-x: [gulir | otomatis]
  3. overflow-y: [gulir | otomatis]

Saya ingin menemukan orangtua terdekat yang dapat digulir dari elemen lain jadi saya juga menulis plugin jQuery kecil lain untuk menemukan orangtua terdekat dengan overflow.

Solusi ini mungkin tidak melakukan yang terbaik, tetapi tampaknya berhasil. Saya menggunakannya bersamaan dengan plugin $ .scrollTo. Terkadang saya perlu tahu apakah suatu elemen ada di dalam wadah yang dapat digulir. Dalam hal ini saya ingin menggulir elemen digulir induk vs jendela.

Saya mungkin harus membungkus ini dalam satu plugin dan menambahkan pemilih psuedo sebagai bagian dari plugin, serta memaparkan metode 'terdekat' untuk menemukan wadah digulir terdekat (induk).

Siapa pun .... ini dia.

Plugin jQuery $ .isScrollable:

$.fn.isScrollable = function(){
    var elem = $(this);
    return (
    elem.css('overflow') == 'scroll'
        || elem.css('overflow') == 'auto'
        || elem.css('overflow-x') == 'scroll'
        || elem.css('overflow-x') == 'auto'
        || elem.css('overflow-y') == 'scroll'
        || elem.css('overflow-y') == 'auto'
    );
};

$ (': scrollable') jQuery selektor semu:

$.expr[":"].scrollable = function(a) {
    var elem = $(a);
    return elem.isScrollable();
};

Plugin jQuery $ .scrollableparent ():

$.fn.scrollableparent = function(){
    return $(this).closest(':scrollable') || $(window); //default to $('html') instead?
};

Implementasinya cukup sederhana

//does a specific element have overflow scroll?
var somedivIsScrollable = $(this).isScrollable();
//use :scrollable psuedo selector to find a collection of child scrollable elements
var scrollableChildren = $(this).find(':scrollable');
//use $.scrollableparent to find closest scrollable container
var scrollableparent = $(this).scrollableparent();

UPDATE: Saya menemukan bahwa Robert Koritnik sudah datang dengan yang lebih kuat: pemilih pseudo yang dapat digulir yang akan mengidentifikasi kapak yang dapat digulir dan ketinggian wadah yang dapat digulir, sebagai bagian dari plugin jQuery $ .scrollintoview () nya. plugin scrollintoview

Inilah pemilih (alat peraga) mewahnya:

    $.extend($.expr[":"], {

    scrollable: function (element, index, meta, stack) {

        var direction = converter[typeof (meta[3]) === "string" && meta[3].toLowerCase()] || converter.both;

        var styles = (document.defaultView && document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(element, null) : element.currentStyle);

        var overflow = {

            x: scrollValue[styles.overflowX.toLowerCase()] || false,

            y: scrollValue[styles.overflowY.toLowerCase()] || false,

            isRoot: rootrx.test(element.nodeName)

        };



        // check if completely unscrollable (exclude HTML element because it's special)

        if (!overflow.x && !overflow.y && !overflow.isRoot)

        {

            return false;

        }



        var size = {

            height: {

                scroll: element.scrollHeight,

                client: element.clientHeight

            },

            width: {

                scroll: element.scrollWidth,

                client: element.clientWidth

            },

            // check overflow.x/y because iPad (and possibly other tablets) don't dislay scrollbars

            scrollableX: function () {

                return (overflow.x || overflow.isRoot) && this.width.scroll > this.width.client;

            },

            scrollableY: function () {

                return (overflow.y || overflow.isRoot) && this.height.scroll > this.height.client;

            }

        };

        return direction.y && size.scrollableY() || direction.x && size.scrollableX();

    }

});

6

Solusi pertama di atas hanya berfungsi di IE Solusi kedua di atas hanya berfungsi di FF

Kombinasi kedua fungsi ini bekerja di kedua browser:

//Firefox Only!!
if ($(document).height() > $(window).height()) {
    // has scrollbar
    $("#mtc").addClass("AdjustOverflowWidth");
    alert('scrollbar present - Firefox');
} else {
    $("#mtc").removeClass("AdjustOverflowWidth");
}

//Internet Explorer Only!!
(function($) {
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > this.innerHeight();
    }
})(jQuery);
if ($('#monitorWidth1').hasScrollBar()) {
    // has scrollbar
    $("#mtc").addClass("AdjustOverflowWidth");
    alert('scrollbar present - Internet Exploder');
} else {
    $("#mtc").removeClass("AdjustOverflowWidth");
}​
  • Bungkus dalam dokumen yang siap
  • monitorWidth1: div di mana overflow diatur ke otomatis
  • mtc: div kontainer di dalam monitorWidth1
  • AdjustOverflowWidth: kelas css diterapkan pada #mtc div ketika Scrollbar aktif * Gunakan lansiran untuk menguji browser lintas, dan kemudian komentar untuk kode produksi akhir.

HTH


6

(scrollWidth / Tinggi - clientWidth / Tinggi) adalah indikator yang baik untuk keberadaan scrollbar, tetapi itu akan memberi Anda jawaban "false positive" pada banyak kesempatan. jika Anda perlu akurat saya sarankan menggunakan fungsi berikut. alih-alih mencoba menebak jika elemen tersebut dapat digulir - Anda dapat menggulirnya ...

function isScrollable( el ){
  var y1 = el.scrollTop;
  el.scrollTop  += 1;
  var y2 = el.scrollTop;
  el.scrollTop  -= 1;
  var y3 = el.scrollTop;
  el.scrollTop   = y1;
  var x1 = el.scrollLeft;
  el.scrollLeft += 1;
  var x2 = el.scrollLeft;
  el.scrollLeft -= 1;
  var x3 = el.scrollLeft;
  el.scrollLeft  = x1;
  return {
    horizontallyScrollable: x1 !== x2 || x2 !== x3,
    verticallyScrollable: y1 !== y2 || y2 !== y3
  }
}
function check( id ){
  alert( JSON.stringify( isScrollable( document.getElementById( id ))));
}
#outer1, #outer2, #outer3 {
  background-color: pink;
  overflow: auto;
  float: left;
}
#inner {
  width:  150px;
  height: 150px;
}
button {  margin: 2em 0 0 1em; }
<div id="outer1" style="width: 100px; height: 100px;">
  <div id="inner">
    <button onclick="check('outer1')">check if<br>scrollable</button>
  </div>
</div>
<div id="outer2" style="width: 200px; height: 100px;">
  <div id="inner">
    <button onclick="check('outer2')">check if<br>scrollable</button>
  </div>
</div>
<div id="outer3" style="width: 100px; height: 180px;">
  <div id="inner">
    <button onclick="check('outer3')">check if<br>scrollable</button>
  </div>
</div>


Pada kesempatan apa itu akan memberikan hasil positif palsu?
GaloisGirl

5

Ugh semua orang menjawab di sini tidak lengkap, dan mari kita berhenti menggunakan jquery dalam jawaban SO sudah tolong. Periksa dokumentasi jquery jika Anda ingin info tentang jquery.

Inilah fungsi javascript murni umum untuk menguji apakah suatu elemen memiliki bilah gulir secara lengkap atau tidak:

// dimension - Either 'y' or 'x'
// computedStyles - (Optional) Pass in the domNodes computed styles if you already have it (since I hear its somewhat expensive)
function hasScrollBars(domNode, dimension, computedStyles) {
    dimension = dimension.toUpperCase()
    if(dimension === 'Y') {
        var length = 'Height'
    } else {
        var length = 'Width'
    }

    var scrollLength = 'scroll'+length
    var clientLength = 'client'+length
    var overflowDimension = 'overflow'+dimension

    var hasVScroll = domNode[scrollLength] > domNode[clientLength]


    // Check the overflow and overflowY properties for "auto" and "visible" values
    var cStyle = computedStyles || getComputedStyle(domNode)
    return hasVScroll && (cStyle[overflowDimension] == "visible"
                         || cStyle[overflowDimension] == "auto"
                         )
          || cStyle[overflowDimension] == "scroll"
}

4
Mengapa menghindari menggunakan jquery pada pertanyaan yang dikelompokkan sebagai jquery? Silakan tambahkan tautan ke bagian dokumentasi jquery yang Anda sebutkan.
kpull1

6
@ kpull1 Terlalu banyak orang memberi tag jQuery pada setiap pertanyaan javascript tunggal yang mereka miliki. Pertanyaan ini memiliki 0 kaitan dengan jQuery. Ada adalah tidak ada bagian dari dokumentasi jQuery yang memiliki jawabannya, karena jQuery tidak melakukan hal ini, atau harus itu.
BT

4

Saya akan memperluas ini lebih jauh lagi untuk jiwa-jiwa miskin yang, seperti saya, menggunakan salah satu kerangka js modern dan bukan JQuery dan telah sepenuhnya ditinggalkan oleh orang-orang di utas ini:

ini ditulis dalam Angular 6 tetapi jika Anda menulis React 16, Vue 2, Polymer, Ionic, React-Native, Anda akan tahu apa yang harus dilakukan untuk mengadaptasinya. Dan itu adalah seluruh komponen sehingga harus mudah.

import {ElementRef, AfterViewInit} from '@angular/core';

@Component({
  selector: 'app',
  templateUrl: './app.html',
  styleUrls: ['./app.scss']
})
export class App implements AfterViewInit {
scrollAmount;

constructor(
  private fb: FormBuilder,
  private element: ElementRef 
) {}

ngAfterViewInit(){
  this.scrollAmount = this.element.nativeElement.querySelector('.elem-list');
  this.scrollAmount.addEventListener('wheel', e => { //you can put () instead of e
  // but e is usefull if you require the deltaY amount.
    if(this.scrollAmount.scrollHeight > this.scrollAmount.offsetHeight){
       // there is a scroll bar, do something!
    }else{
       // there is NO scroll bar, do something!
    }
  });
}
}

di html akan ada div dengan kelas "elem-list" yang bergaya dalam css atau scss untuk memiliki heightdan overflownilai yang tidak hidden. (jadi autoatau sroll)

Saya memicu evaluasi ini pada acara gulir karena tujuan akhir saya adalah untuk memiliki "gulir fokus otomatis" yang memutuskan apakah mereka menggulir seluruh rangkaian komponen secara horizontal jika komponen tersebut tidak memiliki gulir vertikal yang tersedia dan sebaliknya hanya menggulirkan jeroan salah satu komponen secara vertikal.

tetapi Anda dapat menempatkan eval di tempat lain agar dipicu oleh sesuatu yang lain.

yang penting untuk diingat di sini, adalah Anda tidak pernah Terpaksa kembali menggunakan JQuery, selalu ada cara untuk mengakses fungsi yang sama tanpa menggunakannya.


1
Penasaran mengapa Anda mendengarkan acara roda untuk memeriksa apakah ada scrollbar atau tidak.
mix3d

3
Juga, karena Anda menggunakan fungsi panah, thispertahankan cakupan induknya; th = this;tidak perlu.
mix3d

1
@ mix3d Saya pribadi menggunakan kode ini untuk secara otomatis beralih antara pengguliran horizontal dan vertikal berdasarkan yang memiliki arah gulir pada elemen runcing tertentu yang dinamis
tatsu

1
Re: ini; itu pada dasarnya gula sintaksis (ditambah singkatan yang bagus) untukfunction(){}.bind(this)
mix3d

1

Berikut adalah versi jawaban Evan yang disempurnakan yang tampaknya menjelaskan dengan tepat logika overflow.

            function element_scrollbars(node) {
                var element = $(node);
                var overflow_x = element.css("overflow-x");
                var overflow_y = element.css("overflow-y");
                var overflow = element.css("overflow");
                if (overflow_x == "undefined") overflow_x == "";
                if (overflow_y == "undefined") overflow_y == "";
                if (overflow == "undefined") overflow == "";
                if (overflow_x == "") overflow_x = overflow;
                if (overflow_y == "") overflow_y = overflow;
                var scrollbar_vertical = (
                    (overflow_y == "scroll")
                    || (
                        (
                            (overflow_y == "hidden")
                            || (overflow_y == "visible")
                        )
                        && (
                            (node.scrollHeight > node.clientHeight)
                        )
                    )
                );
                var scrollbar_horizontal = (
                    (overflow_x == "scroll")
                    || (
                        (
                            (overflow_x == "hidden")
                            || (overflow_x == "visible")
                        )
                        && (
                            (node.scrollWidth > node.clientWidth)
                        )
                    )
                );
                return {
                    vertical: scrollbar_vertical,
                    horizontal: scrollbar_horizontal
                };
            }

1

Solusi yang diberikan di atas akan bekerja dalam kebanyakan kasus, tetapi memeriksa scrollHeight dan overflow kadang-kadang tidak cukup dan dapat gagal untuk elemen tubuh dan html seperti yang terlihat di sini: https://codepen.io/anon/pen/EvzXZw

1. Solusi - Periksa apakah elemen dapat digulir:

function isScrollableY (element) {
  return !!(element.scrollTop || (++element.scrollTop && element.scrollTop--));
}

Catatan: elemen dengan overflow: hiddenjuga diperlakukan sebagai digulir ( info lebih lanjut ), jadi Anda dapat menambahkan kondisi terhadap itu juga jika diperlukan:

function isScrollableY (element) {
    let style = window.getComputedStyle(element);
    return !!(element.scrollTop || (++element.scrollTop && element.scrollTop--)) 
           && style["overflow"] !== "hidden" && style["overflow-y"] !== "hidden";
}

Sejauh yang saya tahu metode ini hanya gagal jika elemen memiliki scroll-behavior: smooth.

Penjelasan: Caranya adalah, bahwa upaya menggulir ke bawah dan mengembalikannya tidak akan diberikan oleh browser. Fungsi paling atas juga dapat ditulis seperti berikut:

2. Solusi - Lakukan semua pemeriksaan yang diperlukan:

function isScrollableY (element) {
  const style = window.getComputedStyle(element);
  
  if (element.scrollHeight > element.clientHeight &&
      style["overflow"] !== "hidden" && style["overflow-y"] !== "hidden" &&
      style["overflow"] !== "clip" && style["overflow-y"] !== "clip"
  ) {
    if (element === document.documentElement) return true;
    else if (style["overflow"] !== "visible" && style["overflow-y"] !== "visible") {
      // special check for body element (https://drafts.csswg.org/cssom-view/#potentially-scrollable)
      if (element === document.body) {
        const parentStyle = window.getComputedStyle(element.parentElement);
        if (parentStyle["overflow"] !== "visible" && parentStyle["overflow-y"] !== "visible" &&
            parentStyle["overflow"] !== "clip" && parentStyle["overflow-y"] !== "clip"
        ) {
          return true;
        }
      }
      else return true;
    }
  }
  
  return false;
}

0

Inilah peningkatan saya: tambah parseInt. untuk beberapa alasan aneh itu tidak berhasil tanpanya.

// usage: jQuery('#my_div1').hasVerticalScrollBar();
// Credit: http://stackoverflow.com/questions/4814398/how-can-i-check-if-a-scrollbar-is-visible
(function($) {
    $.fn.hasVerticalScrollBar = function() {
        return this.get(0) ? parseInt( this.get(0).scrollHeight ) > parseInt( this.innerHeight() ) : false;
    };
})(jQuery);

0

Bekerja di Chrome , Edge , Firefox dan Opera , setidaknya di versi yang lebih baru.

Menggunakan JQuery ...

Atur fungsi ini untuk memperbaiki catatan kaki:

function fixFooterCaller()
{
    const body = $('body');
    const footer = $('body footer');

    return function ()
    {
        // If the scroll bar is visible
        if ($(document).height() > $(window).height())
        {
            // Reset
            footer.css('position', 'inherit');
            // Erase the padding added in the above code
            body.css('padding-bottom', '0');
        }
        // If the scrollbar is NOT visible
        else
        {
            // Make it fixed at the bottom
            footer.css('position', 'fixed');
            // And put a padding to the body as the size of the footer
            // This makes the footer do not cover the content and when
            // it does, this event fix it
            body.css('padding-bottom', footer.outerHeight());
        }
    }
}

Ini mengembalikan fungsi. Dibuat dengan cara ini hanya untuk mengatur tubuh dan footer satu kali.

Dan kemudian, atur ini ketika dokumen sudah siap.

$(document).ready(function ()
{
    const fixFooter = fixFooterCaller();

    // Put in a timeout call instead of just call the fixFooter function
    // to prevent the page elements needed don't be ready at this time
    setTimeout(fixFooter, 0);
    // The function must be called every time the window is resized
    $(window).resize(fixFooter);
});

Tambahkan ini ke footer css Anda:

footer {
    bottom: 0;
}

0

Sebagian besar jawaban yang diberikan membuat saya dekat dengan tempat yang saya butuhkan, tetapi tidak cukup di sana.

Kami pada dasarnya ingin menilai apakah bilah gulir - akan terlihat dalam situasi normal, dengan definisi yang berarti bahwa ukuran elemen tubuh lebih besar daripada port tampilan. Ini bukan solusi yang disajikan, itulah sebabnya saya mengirimkannya.

Semoga ini membantu seseorang!

(function($) {
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > $(window).height();
    }
})(jQuery);

Pada dasarnya, kami memiliki hasScrollbarfungsi, tetapi kembali jika elemen yang diminta lebih besar dari port tampilan. Untuk melihat ukuran port, kami baru saja menggunakan $(window).height(). Perbandingan cepat terhadap ukuran elemen, menghasilkan hasil yang benar dan perilaku yang diinginkan.


0

Temukan induk elemen saat ini yang memiliki pengguliran atau badan vertikal.

$.fn.scrollableParent = function() {
    var $parents = this.parents();

    var $scrollable = $parents.filter(function(idx) {
        return this.scrollHeight > this.offsetHeight && this.offsetWidth !== this.clientWidth;
    }).first();

    if ($scrollable.length === 0) {
        $scrollable = $('html, body');
    }
    return $scrollable;
};

Ini dapat digunakan untuk autoscroll ke elemen saat ini melalui:

var $scrollable = $elem.scrollableParent();
$scrollable.scrollTop($elem.position().top);

0

Pendekatan Tanpa Kerangka JavaScript, memeriksa vertikal dan horizontal

 /*
 * hasScrollBars
 * 
 * Checks to see if an element has scrollbars
 * 
 * @returns {object}
 */
Element.prototype.hasScrollBars = function() {
    return {"vertical": this.scrollHeight > this.style.height, "horizontal": this.scrollWidth > this.style.width};
}

Gunakan seperti ini

if(document.getElementsByTagName("body")[0].hasScrollBars().vertical){
            alert("vertical");
}

        if(document.getElementsByTagName("body")[0].hasScrollBars().horizontal){
            alert("horizontal");
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.