Я работаю над настраиваемой привязкой нокаута, которая определяет, прокручивается ли конкретный элемент, и обновляет наблюдаемую границу с верхней частью элемента относительно области просмотра. Сейчас привязка, похоже, работает, но меня беспокоит, есть ли обстоятельства, при которых она не будет работать.
HTML:
Scroll position:
This is some text.
CSS:
.longdiv {
width: 200px;
height: 200px;
overflow: scroll;
border: 1px solid black;
}
JS:
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
Привязка принимает элемент и использует jQuery для обхода родительской цепочки в поисках родительский элемент имеет переполнение: набор прокрутки. Если он находит элемент div с переполнением: прокрутка, он привязывает обработчик событий к событию прокрутки этого элемента. Если он не находит родителя с переполнением: прокрутка, он затем привязывается к событию прокрутки окна.
Итак, что я ищу, учитывая документ структурировано следующим образом:
body > div > div > div > p
— это содержащий элемент, ближайший к 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;
}
}
Подробнее здесь: https://stackoverflow.com/questions/299 ... scrollable
