overflow:autoBir div'ı kontrol etmek mümkün mü ?

Örneğin:

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'):
         }
    }

});

Bazen içerik kısa (kaydırma çubuğu yok) ve bazen uzun (kaydırma çubuğu görünür).

bunun için küçük bir eklenti.

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

böyle kullan,

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

Firefox, Chrome, IE üzerinde çalışırken test edilmiştir6,7,8

ancak bodyetiket seçicide düzgün çalışmıyor

gösteri

Düzenle

Dikey kaydırma çubuğunun görünmesine neden olan yatay kaydırma çubuğunuz olduğunda, bu işlev çalışmadığını öğrendim ....

Başka bir çözüm buldum ... kullan clientHeight

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

Belki daha basit bir çözüm.

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

Bunu Element.scrollHeightve Element.clientHeightözniteliklerinin bir birleşimini kullanarak yapabilirsiniz .

MDN'ye göre:

Element.scrollHeight salt okunur özniteliği nedeniyle taşma için ekranda görünmez içerik dahil bir elemanın içeriğinin yüksekliğinin bir ölçümüdür. ScrollHeight değeri, dikey kaydırma çubuğu kullanmadan görünüm içeriğindeki tüm içeriği sığdırmak için öğenin gerektireceği minimum clientHeight değerine eşittir. Öğe dolgusunu içerir ancak kenar boşluğunu içermez.

Ve:

Element.clientHeight salt okunur özellik döndürür Bir elemanın iç yüksekliği dolgu ancak yatay kaydırma çubuğu yüksekliği, sınırda veya marjı dahil piksel içinde.

clientHeight, CSS yüksekliği + CSS dolgusu - yatay kaydırma çubuğunun yüksekliği (varsa) olarak hesaplanabilir.

Bu nedenle, kaydırma yüksekliği istemci yüksekliğinden daha büyükse, öğe bir kaydırma çubuğu görüntüler, bu nedenle sorunuzun cevabı:

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

Reigel'in söylediklerinin küçük bir kısmını değiştirmeliyim:

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

innerHeight, kontrolün yüksekliğini ve üst ve alt dolgularını sayar

Bu @ Reigel'in cevabı üzerine genişliyor. Yatay veya dikey kaydırma çubukları için bir yanıt döndürür.

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

Misal:

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

Element.scrollHeight gerekir . İle karşılaştırın $(element).height().

Bir öğe aşağıdaki css özelliklerinden birine sahip olup olmadığını sınamak için jQuery için yeni bir özel: sözde seçici yaptım:

1. taşma: [kaydırma | otomatik]
2. overflow-x: [kaydırma | otomatik]
3. overflow-y: [kaydırma | otomatik]

Başka bir öğenin en yakın kaydırılabilir üst öğesini bulmak istedim, bu yüzden taşma ile en yakın üst öğeyi bulmak için başka bir küçük jQuery eklentisi yazdım.

Bu çözüm muhtemelen en iyisini yapmaz, ancak işe yarıyor gibi görünüyor. $ .ScrollTo eklentisi ile birlikte kullandım. Bazen bir elemanın başka bir kaydırılabilir kabın içinde olup olmadığını bilmem gerekir. Bu durumda üst kaydırılabilir öğeyi pencereye kaydırmak istiyorum.

Muhtemelen bunu tek bir eklenti içine almalıyım ve psuedo seçicisini eklentinin bir parçası olarak eklemeliyim ve en yakın (ana) kaydırılabilir kapsayıcıyı bulmak için 'en yakın' yöntemi göstermeliydim.

Neyse .... işte burada.

$ .isScrollable jQuery eklentisi:

$.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 sözde seçici:

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

$ .scrollableparent () jQuery eklentisi:

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

Uygulama oldukça basit

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

GÜNCELLEME: Robert Koritnik'in zaten çok daha güçlü olduğunu buldum: $ .scrollintoview () jQuery eklentisinin bir parçası olarak kaydırılabilir eksenleri ve kaydırılabilir kapların yüksekliğini tanımlayacak kaydırılabilir bir sahte seçici. scrollintoview eklentisi

İşte onun süslü sözde seçici (sahne):

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

    }

});

Yukarıdaki ilk çözüm yalnızca IE'de çalışır Yukarıdaki ikinci çözüm yalnızca FF'de çalışır

Her iki işlevin bu kombinasyonu her iki tarayıcıda da çalışır:

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

• Hazır bir belgeye sarın
• monitorWidth1: taşmanın otomatik olarak ayarlandığı div
• mtc: monitörün içindeki bir konteyner bölmesi
• AdjustOverflowWidth: Kaydırma Çubuğu etkinken #mtc div öğesine uygulanan bir css sınıfı * Çapraz tarayıcıyı test etmek için uyarıyı kullanın ve ardından son üretim kodu için yorum yapın.

HTH

(scrollWidth / Height - clientWidth / Height) bir kaydırma çubuğunun varlığı için iyi bir göstergedir, ancak birçok durumda size "yanlış pozitif" bir cevap verecektir. doğru olması gerekiyorsa ben aşağıdaki işlevi kullanmanızı öneririm. öğenin kaydırılabilir olup olmadığını tahmin etmeye çalışmak yerine, kaydırabilirsiniz ...

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>

Buradaki herkesin cevapları eksik ve SO cevaplarında jquery kullanmayı bırakalım lütfen. Jquery hakkında bilgi istiyorsanız jquery belgelerine bakın.

İşte bir öğenin kaydırma çubuklarının eksiksiz bir şekilde olup olmadığını test etmek için genelleştirilmiş bir saf javascript işlevi:

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

Benim gibi JQuery'den değil , modern js çerçevelerinden birini kullanan ve bu iş parçacığının insanları tarafından tamamen terk edilmiş olan fakir ruhlar için bunu daha da genişleteceğim :

bu Açısal 6'da yazılmıştır, ancak React 16, Vue 2, Polimer, İyonik, React-Native yazarsanız, uyarlamak için ne yapacağınızı bileceksiniz. Ve tüm bileşen bu yüzden kolay olmalı.

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

html'de, css veya scss içinde stilize edilmiş bir "elem-list" sınıfına sahip bir div heightve olmayan bir overflowdeğer olacaktır hidden. ( autoya da sroll)

Bu değerlendirmeyi bir kaydırma olayında tetikliyorum çünkü nihai hedefim, söz konusu bileşenlerin dikey kaydırma yoksa tüm bileşen kümesini yatay olarak kaydırıp kaydırmadıklarına karar veren "otomatik odak kaydırmaları" ve aksi takdirde yalnızca bileşenleri dikey olarak.

ancak başka bir şey tarafından tetiklenmesi için değerlendirmeyi başka bir yere yerleştirebilirsiniz.

Burada hatırlanması gereken önemli şey, asla konum olduğunu Zorla JQuery kullanarak geri, hep erişmek için bir yolu kullanmadan sahip olduğu aynı işlevleri var.

İşte Evan'ın cevabının taşma mantığını düzgün bir şekilde açıkladığı geliştirilmiş bir versiyonu.

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

Yukarıda verilen çözümler çoğu durumda işe yarar, ancak scrollHeight ve taşma kontrolü bazen yeterli olmaz ve burada görüldüğü gibi gövde ve html öğeleri için başarısız olabilir: https://codepen.io/anon/pen/EvzXZw

1. Çözüm - Öğenin kaydırılabilir olup olmadığını kontrol edin:

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

Not: ile öğeler overflow: hiddende kaydırılabilir olarak ele alınır ( daha fazla bilgi ), bu nedenle gerekirse buna da bir koşul ekleyebilirsiniz:

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

Bildiğim kadarıyla bu yöntem sadece öğe varsa başarısız olur scroll-behavior: smooth.

Açıklama: Hile, aşağı kaydırma ve geri döndürme girişiminin tarayıcı tarafından oluşturulmayacağıdır. En üstteki fonksiyon aşağıdaki gibi de yazılabilir:

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. Çözüm - Gerekli tüm kontrolleri yapın:

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

İşte benim gelişim: parseInt ekledi. garip bir nedenden ötürü onsuz çalışmadı

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

Üzerinde çalışır Krom , Kenar , Firefox ve Opera , en azından yeni sürümlerinde.

JQuery kullanma ...

Altbilgiyi düzeltmek için bu işlevi ayarlayın:

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

Bir işlev döndürür. Vücudu ve altbilgiyi bir kez ayarlamak için bu şekilde yapıldı.

Ardından, belge hazır olduğunda bunu ayarlayın.

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

Bunu altbilginize ekleyin css:

footer {
    bottom: 0;
}

Sunulan cevapların çoğu beni olması gereken yere yaklaştırdı, ama tam olarak orada değil.

Temel olarak kaydırma çubuklarının normal bir durumda görünüp görünmeyeceğini değerlendirmek istedik, bu tanımla gövde elemanının boyutunun görünüm portundan daha büyük olduğu anlamına gelir. Bu sunulan bir çözüm değildi, bu yüzden gönderiyorum.

Umarım birine yardımcı olur!

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

Temel olarak, hasScrollbarişleve sahibiz , ancak istenen öğe görünüm bağlantı noktasından daha büyükse geri döner. Görünüm bağlantı noktası boyutu için, sadece kullandık $(window).height(). Bunun eleman boyutuyla hızlı bir şekilde karşılaştırılması, doğru sonuçları ve istenen davranışı verir.

Geçerli öğenin dikey kaydırma veya gövdeye sahip bir üst öğesini bulun.

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

Şu anki öğeye otomatik kaydırma yapmak için kullanılabilir:

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

A Çerçeve Yok JavaScript Yaklaşımı, hem dikey hem de yatay olarak kontrol eder

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

Bu şekilde kullanın

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

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