Finden erste scrollbare Eltern

Habe ich diese situation, in der ich scrollen zu müssen) ein element in den viewport. Das problem ist, dass ich nicht weiß, welches element ist die durchlaufbaren. Zum Beispiel in der Porträt-der Körper ist die durchlaufbaren und im Querformat sein ein anderes element (und es gibt weitere situation, die das Scrollbar-element)

Nun die Frage, da ein element, das muss gescrollt werden, in den Arbeitsbereich, was ist der beste Weg zu finden, Ihre erste scrollbare Eltern ?

Ich habe setup eine demo hier. Mit der Taste können Sie Umschalten zwischen den zwei verschiedenen Situationen

<div class="outer">
    <div class="inner">
        <div class="content"> 
            ...
            <span>Scroll me into view</span>
        </div>
    </div>
</div>

Den Körper ist die durchlaufbaren oder .outer

Irgendwelche Vorschläge ?

InformationsquelleAutor Jeanluca Scaljeri | 2016-03-11

41

Nur prüfen, ob die scrollbar sichtbar ist, wenn sich nicht an die Eltern.
```
function getScrollParent(node) {
  if (node == null) {
    return null;
  }

  if (node.scrollHeight > node.clientHeight) {
    return node;
  } else {
    return getScrollParent(node.parentNode);
  }
}
```
- Wenn der Knoten über eine inline Eltern, clientHeight wird 0 sein, und es wird hier zurückgegeben. Besser zu ignorieren Knoten mit clientHeight 0.
- Das ist nett, aber funktioniert nicht für Knoten, die sind überfüllt, aber immer noch nicht scrollen. Wenn Sie eine Prüfung für das overflowY Wert, es scheint gut zu funktionieren. let overflowY = window.getComputedStyle(node).overflowY; let isScrollable = overflowY !== 'visible' && overflowY !== 'hidden'; if (isScrollable && node.scrollHeight > node.clientHeight) {
- Laut @RustyToms und OP, habe ich diese umschreiben ein: gist.github.com/twxia/bb20843c495a49644be6ea3804c0d775
InformationsquelleAutor Stefano Nardo
36

Dies ist eine Reine JS-port des jQuery UI scrollParent Methode, die cweston Sprach von. Ich ging mit diesem eher als die akzeptierte Antwort, die Lösung, die nicht die scroll-Eltern, wenn es keine Inhalte überlauf noch.

Dem Unterschied, dass mit meinem Anschluss ist, dass, wenn kein Elternteil gefunden wird, mit dem richtigen Wert für die CSS - overflow Eigenschaft, die ich an die Rückkehr der <body> element. JQuery-UI, stattdessen kehrte die document Objekt. Dies ist merkwürdig, da Werte wie .scrollTop können abgerufen werden von der <body> aber nicht die document.
```
function getScrollParent(element, includeHidden) {
    var style = getComputedStyle(element);
    var excludeStaticParent = style.position === "absolute";
    var overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/;

    if (style.position === "fixed") return document.body;
    for (var parent = element; (parent = parent.parentElement);) {
        style = getComputedStyle(parent);
        if (excludeStaticParent && style.position === "static") {
            continue;
        }
        if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) return parent;
    }

    return document.body;
}
```
- Vielleicht bin ich etwas fehlt, aber es ist rückwärts für mich.... .scrollTop werden kann, Lesen Sie aus dem Dokument: document.documentElement.scrollTop aber die document.body.scrollTop zurück 0 unabhängig von der aktuellen scroll-position (können Sie testen, in die devtools hier auf SO). Das würde bedeuten, dass es sinnvoll ist, die Jquery-UI gibt das Dokument anstelle des Körpers.
- Gleiche mit jQuery: $("body").scrollTop() gibt immer 0, $(document).scrollTop() gibt Ihre aktuelle scroll-position.
- Wohl besser zurück document.scrollingElement zu Adresse @Skeets Punkt. Vielleicht noch variiert zwischen den Browsern?
InformationsquelleAutor Web_Designer
8

Wenn Sie die Verwendung von jQuery UI können Sie die scrollParent Methode. Haben Sie einen Blick auf die API oder die Quelle.

Aus der API:

.scrollParent(): Holen Sie sich die nächste Vorfahren-element, das ist die durchlaufbaren

Diese Methode, die keine Argumente akzeptiert. Diese Methode
findet der nächste Vorfahr, der es erlaubt scrollen. In anderen Worten, die
.scrollParent() Methode findet das element, das den aktuell ausgewählten
element scrollen in.

Hinweis: Diese Methode funktioniert nur auf jQuery-Objekten, die einem element.

Wenn Sie nicht mit jQuery UI sind aber mit Hilfe von jQuery, dann gibt es alternative unabhängige Bibliotheken, die ähnliche Funktionen wie:

jquery-scrollparent
- Ich portiert diese auf Vanille JS hier: stackoverflow.com/questions/35939886/...
InformationsquelleAutor cweston

die Antwort mit den meisten Stimmen nicht in allen Fällen funktionieren scrollHeight > clientHeight werden kann true auch wenn es keinen Scrollbalken.

Fand ich diesen gist-Lösung https://github.com/olahol/scrollparent.js/blob/master/scrollparent.js#L13

^ total Kredit https://github.com/olahol wer schrieb den code.

Umgestalteten es zu es6:

export const getScrollParent = (node) => {
  const regex = /(auto|scroll)/;
  const parents = (_node, ps) => {
    if (_node.parentNode === null) { return ps; }
    return parents(_node.parentNode, ps.concat([_node]));
  };

  const style = (_node, prop) => getComputedStyle(_node, null).getPropertyValue(prop);
  const overflow = _node => style(_node, 'overflow') + style(_node, 'overflow-y') + style(_node, 'overflow-x');
  const scroll = _node => regex.test(overflow(_node));

  /* eslint-disable consistent-return */
  const scrollParent = (_node) => {
    if (!(_node instanceof HTMLElement || _node instanceof SVGElement)) {
      return;
    }

    const ps = parents(_node.parentNode, []);

    for (let i = 0; i < ps.length; i += 1) {
      if (scroll(ps[i])) {
        return ps[i];
      }
    }

    return document.scrollingElement || document.documentElement;
  };

  return scrollParent(node);
  /* eslint-enable consistent-return */
};

können Sie es verwenden, wie:

const $yourElement = document.querySelector('.your-class-or-selector');
getScrollParent($yourElement);

InformationsquelleAutor ncubica

Ich denke, dass Sie das wollen.

JS:

$('button').click(function() {
  $("body").addClass("body");
  $('.outer').toggleClass('scroller');
  check($(".content"));
});

function check(el) {
  var overflowY = el.css("overflow-y");  
  if (overflowY == "scroll") {
    alert(el.attr("class") + " has");
  } else {
    if(el.parent().length > 0)
   	  check(el.parent());
    else 
      return false;
  }
}

CSS:

body {
  height: 450px;
  overflow-y: scroll;
}

div.inner {
  width: 200px;
  height: 400px;
  border: 1px solid #000;
}

div.outer {
  width: 200px;
  height: 200px;
}

div.outer.scroller {
  overflow-y: scroll;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
  toggle
</button>
<div class="outer">
  <div class="inner">
    <div class="content">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." adipiscing elit, sed do eiusmod tempor incididunt ut
      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
      sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </div>
  </div>
</div>

InformationsquelleAutor NiZa

1

Verwendung von google chrome dev-tools, wenn Sie einen Bildlauf durchgeführt haben teilweise unten auf der Seite, überprüfen Sie die Seite, wählen Sie die DOM-Knoten, die Sie denken, Sie seien derjenige, der wird gescrollt. Dann ziehen Sie die Konsole (ESC Taste aus der Registerkarte Elemente der dev-tools), und geben Sie $0.scrollTop. Dies wird drucken Sie die aktuelle scroll-position des Elements. Wenn es NICHT 0 ist, dann werden Sie wissen, dass dies das element ist, das gescrollt werden.

InformationsquelleAutor Drew2
0

Aufbauend auf weiter auf die @Web_Designer Antwort,

Wenn Sie auf der Durchreise sind die jQuery object für das element aus und sind immer folgende Fehlermeldung,
```
Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'
```
Dann versuchen Sie übergeben nur die Dom Node element was btw befindet sich im array-Schlüssel 0 wenn das element ist ein einzelnes element. ZB.
```
getScrollParent(jQuery("#" + formid)[0])
```
InformationsquelleAutor Mohd Abdul Mujib

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.