Czy można sprawdzić overflow:autodiv?

Na przykład:

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

});

Czasami treść jest krótka (bez paska przewijania), a czasem długa (widoczny pasek przewijania).

mała wtyczka do tego.

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

użyj tego w ten sposób,

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

testowany na Firefox, Chrome, IE6,7,8

ale nie działa poprawnie na bodyselektorze tagów

próbny

Edytować

Dowiedziałem się, że gdy masz poziomy pasek przewijania, który powoduje wyświetlanie pionowego paska przewijania, ta funkcja nie działa ....

Znalazłem inne rozwiązanie ... użyj clientHeight

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

Może prostsze rozwiązanie.

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

Możesz to zrobić za pomocą kombinacji atrybutów Element.scrollHeighti Element.clientHeight.

Według MDN:

Element.scrollHeight tylko do odczytu atrybut jest pomiar wysokości zawartości elementu, w tym zawartość nie jest widoczna na ekranie z powodu przepełnienia. Wartość scrollHeight jest równa minimalnej wysokości clientHe, której wymagałby element, aby dopasować całą zawartość do punktu widzenia bez użycia pionowego paska przewijania. Obejmuje wypełnienie elementu, ale nie jego margines.

I:

Właściwość Element.clientHeight tylko do odczytu zwraca wewnętrzną wysokość elementu w pikselach, w tym dopełnienie, ale nie wysokość poziomego paska przewijania, obramowania lub marginesu.

clientHeight można obliczyć jako wysokość CSS + dopełnienie CSS - wysokość poziomego paska przewijania (jeśli występuje).

Dlatego element wyświetli pasek przewijania, jeśli wysokość przewijania jest większa niż wysokość klienta, więc odpowiedź na twoje pytanie brzmi:

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

Powinienem zmienić drobiazg tego, co powiedziała Reigel:

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

innerHeight liczy wysokość kontrolki oraz jej górne i dolne wypełnienia

Rozszerza to odpowiedź @ Reigel. Zwróci odpowiedź dla poziomych lub pionowych pasków przewijania.

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

Przykład:

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

Potrzebujesz element.scrollHeight . Porównaj to z $(element).height().

Zrobiłem nowy niestandardowy: pseudo selektor dla jQuery, aby sprawdzić, czy element ma jedną z następujących właściwości css:

1. przepełnienie: [przewiń | auto]
2. overflow-x: [scroll | auto]
3. overflow-y: [przewiń | auto]

Chciałem znaleźć najbliższy przewijalny element nadrzędny innego elementu, więc napisałem też kolejną małą wtyczkę jQuery, aby znaleźć najbliższego elementu nadrzędnego z przepełnieniem.

To rozwiązanie prawdopodobnie nie działa najlepiej, ale wydaje się, że działa. Użyłem go w połączeniu z wtyczką $ .scrollTo. Czasami muszę wiedzieć, czy element znajduje się w innym przewijalnym pojemniku. W takim przypadku chcę przewinąć nadrzędny przewijalny element względem okna.

Prawdopodobnie powinienem był zawinąć to w pojedynczą wtyczkę i dodać selektor psuedo jako część wtyczki, a także ujawnić „najbliższą” metodę znalezienia najbliższego (nadrzędnego) przewijalnego kontenera.

W każdym razie ... oto jest.

$ .isScrollable jQuery plugin:

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

$ (': przewijalny') pseudo selektor jQuery:

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

$ .scrollableparent () wtyczka jQuery:

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

Implementacja jest dość prosta

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

AKTUALIZACJA: Odkryłem, że Robert Koritnik już wymyślił znacznie potężniejszy: pseudo selektor przewijalny, który zidentyfikuje przewijalne osie i wysokość przewijalnych pojemników, jako część jego wtyczki $ .scrollintoview () jQuery. plugin scrollintoview

Oto jego fantazyjny pseudo selektor (rekwizyty):

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

    }

});

Pierwsze powyższe rozwiązanie działa tylko w IE Drugie powyższe rozwiązanie działa tylko w FF

Ta kombinacja obu funkcji działa w obu przeglądarkach:

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

• Zawiń w gotowy dokument
• monitorWidth1: div, w którym przepełnienie jest ustawione na auto
• mtc: div kontenera wewnątrz monitorWidth1
• AdjustOverflowWidth: klasa css zastosowana do div #mtc, gdy pasek przewijania jest aktywny * Użyj alertu, aby przetestować przeglądarkę, a następnie skomentuj końcowy kod produkcyjny.

HTH

(scrollWidth / Height - clientWidth / Height) jest dobrym wskaźnikiem obecności paska przewijania, ale w wielu przypadkach daje odpowiedź „fałszywie pozytywną”. jeśli chcesz być dokładny, sugeruję skorzystanie z następującej funkcji. zamiast zgadywać, czy element można przewijać - możesz go przewijać ...

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, wszystkie odpowiedzi tutaj są niekompletne, i proszę przestańmy używać jquery w odpowiedziach SO. Sprawdź dokumentację jquery, jeśli chcesz uzyskać informacje na temat jquery.

Oto uogólniona funkcja czystego javascript do testowania, czy element ma paski przewijania w sposób kompletny:

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

Zamierzam rozwinąć tę kwestię jeszcze bardziej dla tych biednych dusz, które, podobnie jak ja, używają jednego z nowoczesnych frameworków js, a nie JQuery i zostały całkowicie porzucone przez ludzi tego wątku:

zostało to napisane w Angular 6, ale jeśli napiszesz React 16, Vue 2, Polymer, Ionic, React-Native, będziesz wiedział, co zrobić, aby go dostosować. I to cały element, więc powinno być łatwo.

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

w html będzie div z klasą „elem-list”, która jest stylizowana w css lub scss, aby mieć wartość heighti overflowwartość, która nie jest hidden. (tak autolubsroll )

Wywołuję tę ewaluację podczas zdarzenia przewijania, ponieważ moim ostatecznym celem było „automatyczne przewijanie fokusu”, które decyduje, czy przewijają one cały zestaw komponentów w poziomie, jeśli te komponenty nie mają przewijania w pionie, a w przeciwnym razie przewijają tylko wnętrze jednego z komponenty w pionie.

ale możesz umieścić ewaluację gdzie indziej, aby została uruchomiona przez coś innego.

ważną rzeczą do zapamiętania tutaj jest to, że nigdy nie musisz zmuszać się do korzystania z JQuery, zawsze jest sposób na uzyskanie dostępu do tych samych funkcji, które ma on bez korzystania z niego.

Oto ulepszona wersja odpowiedzi Evana, która wydaje się odpowiednio uwzględniać logikę przepełnienia.

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

Powyższe rozwiązania będą działać w większości przypadków, ale sprawdzanie scrollHeight i przepełnienie jest czasem niewystarczające i może zawieść w przypadku elementów body i HTML jak widać tutaj: https://codepen.io/anon/pen/EvzXZw

1. Rozwiązanie - Sprawdź, czy element można przewijać:

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

Uwaga: elementy z overflow: hiddensą również traktowane jako przewijalne ( więcej informacji ), więc w razie potrzeby możesz dodać warunek:

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

O ile wiem, ta metoda zawodzi tylko wtedy, gdy element ma scroll-behavior: smooth .

Objaśnienie: Sztuczka polega na tym, że próba przewinięcia w dół i cofnięcia nie zostanie wykonana przez przeglądarkę. Najwyższą funkcję można również zapisać następująco:

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. Rozwiązanie - Wykonaj wszystkie niezbędne kontrole:

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

Oto moja poprawa: dodano analizę. z jakiegoś dziwnego powodu nie działałoby bez tego.

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

Działa w Chrome , Edge , Firefox i Opera , przynajmniej w nowszych wersjach.

Korzystanie z JQuery ...

Ustaw tę funkcję, aby naprawić stopkę:

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

Zwraca funkcję. Wykonano w ten sposób, aby raz ustawić ciało i stopkę.

A następnie ustaw to, gdy dokument będzie gotowy.

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

Dodaj to do swojej stopki css:

footer {
    bottom: 0;
}

Większość przedstawionych odpowiedzi zbliżyła mnie do miejsca, w którym powinienem być, ale nie do końca.

Zasadniczo chcieliśmy ocenić, czy paski przewijania - powinny być widoczne w normalnej sytuacji, zgodnie z tą definicją, co oznacza, że ​​rozmiar elementu treści jest większy niż port widoku. To nie było przedstawione rozwiązanie, dlatego je zgłaszam.

Mam nadzieję, że to komuś pomaga!

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

Zasadniczo mamy hasScrollbarfunkcję, ale zwracamy , jeśli żądany element jest większy niż port widoku. Po prostu użyliśmy rozmiaru widoku portu $(window).height(). Szybkie porównanie tego z rozmiarem elementu daje prawidłowe wyniki i pożądane zachowanie.

Znajdź element nadrzędny bieżącego elementu, który ma przewijanie pionowe lub bryłę.

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

Można go użyć do automatycznego przewijania do bieżącego elementu za pomocą:

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

Podejście JavaScript bez ram, sprawdza zarówno w pionie, jak iw poziomie

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

Użyj tego w ten sposób

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

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