Wie kann man genau feststellen, ob ein Element scrollbar ist? ⇐ HTML

[Guest]

Ich arbeite an einer benutzerdefinierten Knockout-Bindung, die bestimmt, ob ein bestimmtes Element gescrollt wird, und die beobachtbare Grenze mit der Oberseite des Elements relativ zum Ansichtsfenster aktualisiert. Im Moment scheint die Bindung zu funktionieren, aber ich mache mir Sorgen, ob es bestimmte Umstände gibt, unter denen dies nicht funktioniert.

HTML:

Code: Select all

Scroll position: 

This is some text.

CSS:

Code: Select all

.longdiv {
width: 200px;
height: 200px;
overflow: scroll;
border: 1px solid black;
}

JS:

Code: Select all

ko.bindingHandlers.scroll = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var firstScrollableContainer = null;

var binding = allBindings.get('scroll');

$(element).parents().each(function (i, parent) {
if ($(parent).css('overflow')=='scroll') {
firstScrollableContainer = parent;
return false;
}
});

firstScrollableContainer = firstScrollableContainer || window;

binding(element.getBoundingClientRect().top);

$(firstScrollableContainer).scroll(function() {
binding(element.getBoundingClientRect().top);
});
}
};

var ViewModel = function() {
var self = this;

self.scrollPosition = ko.observable(0);
};

ko.applyBindings(new ViewModel());

JSFiddle

Die Bindung nimmt das Element und verwendet jQuery, um die übergeordnete Kette hinaufzugehen und zu sehen, ob das Das übergeordnete Element hat einen Überlauf: Bildlaufsatz. Wenn ein Div mit overflow: scroll gefunden wird, bindet es einen Event-Handler an das Scroll-Ereignis dieses Elements. Wenn es mit overflow: scroll kein übergeordnetes Element findet, wird es an das Scroll-Ereignis des Fensters gebunden.

Also, was ich suche, angesichts eines Dokuments so aufgebaut:

Code: Select all

body > div > div > div > p

ist das enthaltende Element, das p am nächsten liegt und gescrollt werden kann, sodass ich einen Ereignishandler daran anhängen kann.

Meine Frage ist: Ist die Betrachtung von „overflow: scroll“ ein ausreichender Test, um zu sehen, ob ein übergeordnetes Element gescrollt werden kann? Wenn nicht, worauf sollte ich achten?

EDIT: Basierend auf Ihren hilfreichen Kommentaren und Antworten habe ich hier die Lösung gefunden:

Code: Select all

function scrollable(element) {
var vertically_scrollable, horizontally_scrollable;

var e = $(element);

if (   e.css('overflow') == 'scroll'
|| e.css('overflow') == 'auto'
|| e.css('overflowY') == 'scroll'
|| e.css('overflowY') == 'auto'
|| e.css('height') != 'none'
|| e.css('max-height') != 'none'
) {
return true;
} else {
return false;
}
}