HTML:
Code: Select all
Scroll position:
This is some text.
Code: Select all
.longdiv {
width: 200px;
height: 200px;
overflow: scroll;
border: 1px solid black;
}
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());
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
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;
}
}