Programmiererforum

Scroll position: 

This is some text.

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

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

body > div > div > div > p

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

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]Scroll position:

This is some text.


[/code]

CSS:

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

JS:

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

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]body > div > div > div > p
[/code]

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]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;
}
}
[/code]