title: How to accurately determine if an element is scrollable?
body: <p>I'm working on a custom knockout binding that determines if a particular element is being scrolled, and updates the bound observable with the element's top relative to the viewport.  Right now, the binding seems to work, but I have some worries about whether there are some circumstances where it won't.</p>
  
  <p>HTML:</p>
  
  <pre><code>Scroll position: &lt;span data-bind="text: scrollPosition"&gt;&lt;/span&gt;
  
  &lt;div class="longdiv"&gt;    
      &lt;p data-bind="scroll: scrollPosition"&gt;This is some text.&lt;/p&gt;
      &lt;div class="shim"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.longdiv {
      width: 200px;
      height: 200px;
      overflow: scroll;
      border: 1px solid black;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><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></pre>
  
  <p><a href="http://jsfiddle.net/McCroskey42/0u8kcya8/12/" rel="noreferrer">JSFiddle</a></p>
  
  <p>The binding takes the element and uses jQuery to walk up the parent chain looking to see if the parent element has overflow: scroll set.  If it finds a div with overflow: scroll, it binds an event handler to that element's scroll event.  If it doesn't find a parent with overflow: scroll, it then binds to the scroll event of the window.</p>
  
  <p>So what I'm looking for, given a document structured like so:</p>
  
  <pre><code>body &gt; div &gt; div &gt; div &gt; p
  </code></pre>
  
  <p>is the containing element closest to p that can be scrolled, so that I can attach an event handler to it.  </p>
  
  <p>My question is:  is looking at overflow: scroll a sufficient test to see if a parent element can be scrolled?  If not, what should I be looking at?</p>
  
  <p>EDIT: Based on your helpful comments and answers, here is the solution I came up with:</p>
  
  <pre><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></pre>