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).

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;

Mungkin solusi yang lebih sederhana.

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

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

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

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

Anda membutuhkan element.scrollHeight . Bandingkan dengan $(element).height().

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

    }

});

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

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

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

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.

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

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:

function isScrollableY (element) {
  // if scrollTop is not 0 / larger than 0, then the element is scrolled and therefore must be scrollable
  // -> true  
  if (element.scrollTop === 0) {
    // if the element is zero it may be scrollable  
    // -> try scrolling about 1 pixel
    element.scrollTop++;
    // if the element is zero then scrolling did not succeed and therefore it is not scrollable 
    // -> false  
    if (element.scrollTop === 0) return false;
    // else the element is scrollable; reset the scrollTop property
    // -> true
    element.scrollTop--;
  }
  return true;
}

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

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

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

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.

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

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