Я работаю над пользовательской привязкой нокаута, которая определяет, прокручивается ли конкретный элемент, и обновляет границу, наблюдаемую, с верхом элемента относительно области просмотра. Прямо сейчас привязка, кажется, работает, но у меня есть некоторые беспокойства о том, есть ли обстоятельства, когда это не будет.
HTML:
Scroll position: <span data-bind="text: scrollPosition"></span>
<div class="longdiv">
<p data-bind="scroll: scrollPosition">This is some text.</p>
<div class="shim"></div>
</div>
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());
Привязка берет элемент и использует jQuery, чтобы пройти по родительской цепочке и посмотреть, есть ли у родительского элемента overflow: scroll set. Если он находит div с переполнением: scroll, он связывает обработчик события с этим событием прокрутки элемента. Если он не находит родителя с переполнением: scroll, он привязывается к событию прокрутки окна.
Итак, что я ищу, учитывая документ, структурированный так:
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;
}
}