Как точно определить, прокручивается ли элемент? ⇐ Html

[Anonymous]

Я работаю над настраиваемой привязкой нокаута, которая определяет, прокручивается ли конкретный элемент, и обновляет наблюдаемую границу с верхней частью элемента относительно области просмотра. Сейчас привязка, похоже, работает, но меня беспокоит, есть ли обстоятельства, при которых она не будет работать.

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