Wie kann ich überprüfen, ob eine Bildlaufleiste sichtbar ist?

277

Ist es möglich, die overflow:autoeines Div zu überprüfen ?

Beispielsweise:

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

});

Manchmal ist der Inhalt kurz (keine Bildlaufleiste) und manchmal lang (Bildlaufleiste sichtbar).

Peter
quelle

Antworten:

376

ein kleines Plugin dafür.

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

benutze es so,

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

getestet mit Firefox, Chrome, IE6,7,8

funktioniert aber nicht richtig mit der bodyTag-Auswahl

Demo


Bearbeiten

Ich habe herausgefunden, dass diese Funktion nicht funktioniert, wenn Sie eine horizontale Bildlaufleiste haben, die dazu führt, dass eine vertikale Bildlaufleiste angezeigt wird.

Ich habe eine andere Lösung gefunden ... verwenden clientHeight

return this.get(0).scrollHeight > this.get(0).clientHeight;
Reigel
quelle
22
Wenn Sie Polsterung haben, müssen Sie > this.innerHeight(); jsfiddle.net/p3FFL/210
jcubic
2
Es gibt ein Problem damit, wenn auch eine horizontale Bildlaufleiste vorhanden ist, wird dies falsch zurückgegeben, selbst wenn eine vertikale Bildlaufleiste vorhanden ist, bis die Höhe um die Höhe der horizontalen Bildlaufleiste verkleinert wurde.
Verbündeter
Warum haben Sie dieselbe Funktion zweimal definiert? @jcubic
Nitin Sawant
8
Beachten Sie, dass auf Macs die Bildlaufleiste über dem Inhalt schwebt und verschwindet, wenn sie nicht verwendet wird. Unter Windows ist es immer sichtbar und nimmt horizontalen Platz ein. Nur weil Inhalte gescrollt werden können (was diese Funktion erkennt), bedeutet dies nicht, dass unbedingt eine Bildlaufleiste vorhanden ist.
Andrew
2
(function ($) {$ .fn.hasScrollBar = function () {return this.get (0) .scrollWidth> this.width); }}) (jQuery); Dies funktioniert für das horizontale Overfolow. Gut geeignet, um die Reaktionsfähigkeit von Mobilgeräten auf Websites in Iframes zu überprüfen.
Alexander Nicholas Popa
56

Vielleicht eine einfachere Lösung.

if ($(document).height() > $(window).height()) {
    // scrollbar
}
Sean Zheng
quelle
Diese Antwort funktionierte für mich, nachdem ich überprüft hatte, ob das DOM mit JQuery.ready()
Simple Sandman
4
Dies setzt voraus, dass sich die Bildlaufleiste im Fenster befindet und kein div-Element. Schlagen Sie vor, die Referenz so zu ändern, dass Folgendes vorgeschlagen wird: "Wenn Sie nur die Bildlaufleiste im Hauptfenster testen müssen, können Sie
Folgendes
43

Sie können dies mit einer Kombination der Attribute Element.scrollHeightund tun Element.clientHeight.

Laut MDN:

Das schreibgeschützte Attribut Element.scrollHeight ist ein Maß für die Höhe des Inhalts eines Elements, einschließlich des Inhalts, der aufgrund eines Überlaufs nicht auf dem Bildschirm angezeigt wird. Der Wert für scrollHeight entspricht dem Mindestwert für clientHeight, den das Element benötigen würde, um den gesamten Inhalt in den Ansichtspunkt zu passen, ohne eine vertikale Bildlaufleiste zu verwenden. Es enthält die Elementauffüllung, jedoch nicht den Rand.

Und:

Die schreibgeschützte Eigenschaft Element.clientHeight gibt die innere Höhe eines Elements in Pixel zurück, einschließlich Auffüllen, jedoch nicht die Höhe, den Rand oder den Rand der horizontalen Bildlaufleiste.

clientHeight kann als CSS-Höhe + CSS-Abstand berechnet werden - Höhe der horizontalen Bildlaufleiste (falls vorhanden).

Daher zeigt das Element eine Bildlaufleiste an, wenn die Bildlaufhöhe größer als die Clienthöhe ist. Die Antwort auf Ihre Frage lautet also:

function scrollbarVisible(element) {
  return element.scrollHeight > element.clientHeight;
}
Ajedi32
quelle
2
Beispiel: github.com/twbs/bootstrap/blob/master/js/modal.js#L242 und +1 für das MDN-Zitat und die Erklärung!
Lowtechsun
in Chrom , wenn der Inhalt hat Grenze , als sie nicht in Scrollheight enthalten ist
AT
1
Up-Voted für nicht lahm und Verwendung eines Frameworks / einer Bibliothek.
John
Vorsicht - dies führt zu einem Reflow, der die Leistung beeinträchtigt. gist.github.com/paulirish/5d52fb081b3570c81e3a
Todd Sjolander
43

Ich sollte ein wenig an dem ändern, was Reigel gesagt hat:

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

innerHeight zählt die Höhe des Steuerelements sowie dessen obere und untere Polsterung

kpull1
quelle
return (this.get (0))? this.get (0) .scrollHeight> this.innerHeight (): false;
Commonpike
3
Ich denke, dies sollte als die richtige Antwort zugewiesen werden. Dies funktionierte auf FF35, IE11 und Chrome39.
LucasBr
Der 'Überlauf'-Wert wird nicht überprüft, um sicherzustellen, dass Bildlaufleisten angezeigt werden, wenn diese scrollHeight-Bedingung erfüllt ist.
BT
1
@BT Aber wenn ich in meinem CSS den Überlauf auf Auto gesetzt habe, brauche ich diese zusätzliche Prüfung nicht? Es vergleicht Größen und das ist genug ...?
Andrew
Eine Antwort, die nur für Sie funktioniert, ist keine Antwort. Woher wissen Sie, was andere Leute in ihrem CSS haben? In Ihrer Antwort wird diese Einschränkung nicht erwähnt. Wenn jemand Ihre Antwort nicht eingeben kann und sie funktioniert, ist dies keine gute Antwort.
BT
27

Dies erweitert die Antwort von @ Reigel. Es wird eine Antwort für horizontale oder vertikale Bildlaufleisten zurückgegeben.

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

Beispiel:

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

Sie benötigen element.scrollHeight . Vergleichen Sie es mit $(element).height().

Boldewyn
quelle
8

Ich habe einen neuen benutzerdefinierten Pseudo-Selektor für jQuery erstellt, um zu testen, ob ein Element eine der folgenden CSS-Eigenschaften hat:

  1. Überlauf: [scroll | auto]
  2. overflow-x: [scroll | auto]
  3. Überlauf-y: [scroll | auto]

Ich wollte das nächste scrollbare übergeordnete Element eines anderen Elements finden, also habe ich auch ein weiteres kleines jQuery-Plugin geschrieben, um das nächstgelegene übergeordnete Element mit Überlauf zu finden.

Diese Lösung bietet wahrscheinlich nicht die beste Leistung, scheint jedoch zu funktionieren. Ich habe es in Verbindung mit dem Plugin $ .scrollTo verwendet. Manchmal muss ich wissen, ob sich ein Element in einem anderen scrollbaren Container befindet. In diesem Fall möchte ich das übergeordnete scrollbare Element gegen das Fenster scrollen.

Ich hätte dies wahrscheinlich in ein einzelnes Plugin einwickeln und den Pseudo-Selektor als Teil des Plugins hinzufügen sowie eine 'nächste' Methode verfügbar machen sollen, um den nächsten (übergeordneten) scrollbaren Container zu finden.

Egal ... hier ist es.

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

$ (': scrollable') jQuery-Pseudo-Selektor:

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

$ .scrollableparent () jQuery-Plugin:

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

Die Implementierung ist ziemlich einfach

//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: Ich habe festgestellt, dass Robert Koritnik bereits einen viel leistungsstärkeren: scrollbaren Pseudo-Selektor entwickelt hat, der die scrollbaren Achsen und die Höhe von scrollbaren Containern als Teil seines jQuery-Plugins $ .scrollintoview () identifiziert. scrollintoview Plugin

Hier ist sein ausgefallener Pseudo-Selektor (Requisiten):

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

    }

});
thegrandoverseer
quelle
6

Die erste Lösung oben funktioniert nur im IE. Die zweite Lösung oben funktioniert nur in FF

Diese Kombination beider Funktionen funktioniert in beiden Browsern:

//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");
}​
  • Wickeln Sie ein Dokument fertig ein
  • monitorWidth1: das div, bei dem der Überlauf auf auto gesetzt ist
  • mtc: ein Container div in monitorWidth1
  • AdjustOverflowWidth: Eine CSS-Klasse, die auf das #mtc-Div angewendet wird, wenn die Bildlaufleiste aktiv ist. * Verwenden Sie die Warnung, um den Cross-Browser zu testen, und kommentieren Sie dann den endgültigen Produktionscode aus.

HTH

Aaron Hopkins
quelle
6

(scrollWidth / Height - clientWidth / Height) ist ein guter Indikator für das Vorhandensein einer Bildlaufleiste, gibt Ihnen jedoch bei vielen Gelegenheiten eine "falsch positive" Antwort. Wenn Sie genau sein müssen, würde ich vorschlagen, die folgende Funktion zu verwenden. anstatt zu erraten, ob das Element scrollbar ist - Sie können es scrollen ...

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>

Yair Levy
quelle
Bei welchen Gelegenheiten wird es ein falsches Positiv geben?
GaloisGirl
5

Ugh, alle Antworten hier sind unvollständig, und lassen Sie uns bitte die Verwendung von jquery in SO-Antworten bereits beenden. Überprüfen Sie die Dokumentation von jquery, wenn Sie Informationen zu jquery wünschen.

Hier ist eine verallgemeinerte reine Javascript-Funktion, mit der Sie testen können, ob ein Element vollständig über Bildlaufleisten verfügt:

// 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"
}
BT
quelle
4
Warum sollten Sie es vermeiden, jquery für eine Frage zu verwenden, die als jquery angezeigt wird? Bitte fügen Sie Links zu dem von Ihnen erwähnten Teil der jquery-Dokumentation hinzu.
kpull1
6
@ kpull1 Zu viele Leute markieren jQuery für jede einzelne Javascript-Frage, die sie haben. Diese Frage hat keine Beziehung zu jQuery. Es gibt keinen Teil der jQuery-Dokumentation, der die Antwort enthält, da jQuery dies nicht tut und dies auch nicht tun sollte.
BT
4

Ich werde dies noch weiter ausdehnen für jene armen Seelen, die wie ich eines der modernen js-Frameworks und nicht JQuery verwenden und von den Leuten dieses Threads völlig verlassen wurden:

Dies wurde in Angular 6 geschrieben, aber wenn Sie React 16, Vue 2, Polymer, Ionic, React-Native schreiben, wissen Sie, was Sie tun müssen, um es anzupassen. Und es ist die ganze Komponente, also sollte es einfach sein.

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

im html würde es ein div mit der klasse "elem-list" geben, das im css oder scss so stilisiert ist, dass es einen heightund einen overflowwert hat, der nicht ist hidden. (so autooder so sroll)

Ich löse diese Auswertung bei einem Bildlaufereignis aus, weil mein Endziel darin bestand, "automatische Fokusschriftrollen" zu haben, die entscheiden, ob sie den gesamten Satz von Komponenten horizontal scrollen, wenn für diese Komponenten kein vertikaler Bildlauf verfügbar ist, und ansonsten nur die Innereien eines der Komponenten scrollen Komponenten vertikal.

Sie können die Auswertung jedoch an einer anderen Stelle platzieren, damit sie durch etwas anderes ausgelöst wird.

Das Wichtigste dabei ist, dass Sie nie wieder gezwungen werden, JQuery zu verwenden. Es gibt immer eine Möglichkeit, auf dieselben Funktionen zuzugreifen, ohne JQuery zu verwenden, ohne es zu verwenden.

Tatsu
quelle
1
Neugierig, warum Sie auf Radereignisse warten, um zu überprüfen, ob eine Bildlaufleiste vorhanden ist oder nicht.
mix3d
3
Da Sie Pfeilfunktionen verwenden, thisbleibt der übergeordnete Bereich erhalten. th = this;ist unnötig.
mix3d
1
@ mix3d Ich persönlich benutze diesen Code, um automatisch zwischen horizontalem und vertikalem Scrollen umzuschalten, basierend darauf, welche
Scrollrichtung
1
Re: das; Es ist im Grunde syntaktischer Zucker (plus nette Abkürzung) fürfunction(){}.bind(this)
mix3d
1

Hier ist eine verbesserte Version von Evans Antwort, die die Überlauflogik richtig zu berücksichtigen scheint.

            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
                };
            }
JBlitzen
quelle
1

Die oben angegebenen Lösungen funktionieren in den meisten Fällen, aber die Überprüfung von scrollHeight und Überlauf reicht manchmal nicht aus und kann für Body- und HTML-Elemente fehlschlagen, wie hier dargestellt: https://codepen.io/anon/pen/EvzXZw

1. Lösung - Überprüfen Sie, ob das Element scrollbar ist:

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

Hinweis: Elemente mit overflow: hiddenwerden auch als scrollbar behandelt ( weitere Informationen ). Sie können daher bei Bedarf auch eine Bedingung hinzufügen:

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

Soweit ich weiß, schlägt diese Methode nur fehl, wenn das Element hat scroll-behavior: smooth.

Erläuterung: Der Trick besteht darin, dass der Versuch, nach unten zu scrollen und zurückzusetzen, vom Browser nicht gerendert wird. Die oberste Funktion kann auch wie folgt geschrieben werden:

2. Lösung - Führen Sie alle erforderlichen Überprüfungen durch:

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;
}
Robbendebiene
quelle
0

Hier ist meine Verbesserung: parseInt hinzugefügt. Aus irgendeinem seltsamen Grund hat es ohne nicht funktioniert.

// 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);
Svetoslav Marinov
quelle
0

Funktioniert unter Chrome , Edge , Firefox und Opera , zumindest in den neueren Versionen.

Verwenden von JQuery ...

Richten Sie diese Funktion ein, um die Fußzeile zu reparieren:

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

Es gibt eine Funktion zurück. Auf diese Weise gemacht, nur um den Körper und die Fußzeile einmal einzustellen.

Stellen Sie dies dann ein, wenn das Dokument fertig ist.

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

Fügen Sie dies Ihrem Fußzeilen-CSS hinzu:

footer {
    bottom: 0;
}
Mateus Pires
quelle
0

Die meisten der vorgestellten Antworten brachten mich nahe an den Ort, an dem ich sein musste, aber nicht ganz dort.

Grundsätzlich wollten wir beurteilen, ob die Bildlaufleisten in einer normalen Situation sichtbar sind. Nach dieser Definition bedeutet dies, dass die Größe des Körperelements größer als der Ansichtsfenster ist. Dies war keine vorgestellte Lösung, weshalb ich sie einreiche.

Hoffentlich hilft es jemandem!

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

Im Wesentlichen haben wir die hasScrollbarFunktion, kehren aber zurück, wenn das angeforderte Element größer als der Ansichtsport ist. Für die Größe des Ansichtsports haben wir gerade verwendet $(window).height(). Ein schneller Vergleich mit der Elementgröße ergibt die richtigen Ergebnisse und das gewünschte Verhalten.

Barry Chapman
quelle
0

Suchen Sie ein übergeordnetes Element des aktuellen Elements mit vertikalem Bildlauf oder Körper.

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

Es kann verwendet werden, um automatisch zum aktuellen Element zu scrollen über:

var $scrollable = $elem.scrollableParent();
$scrollable.scrollTop($elem.position().top);
Dmitriy Sintsov
quelle
0

Ein No Framework JavaScript-Ansatz, der sowohl vertikal als auch horizontal überprüft

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

Verwenden Sie es so

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

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