title: Scrollable Panel snap to elements on Scroll
body: <p>Is there a way inside a scrollable div to snap to elements as the user scrolls.</p>
  
  <p>For example if we have CSS such as</p>
  
  <pre><code>.container {
      height: 300px;
      width: 200px;
      overflow: auto
  }
  li {
      height: 40px;
      width: 100 % ;
  }
  </code></pre>
  
  <p>and HTML as</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;li&gt;
          test
      &lt;/li&gt;
      &lt;li&gt;
          test
      &lt;/li&gt;
      &lt;li&gt;
          test
      &lt;/li&gt;
      &lt;li&gt;
          test
      &lt;/li&gt;
      &lt;li&gt;
          test
      &lt;/li&gt;
      &lt;li&gt;
          test
      &lt;/li&gt;
      &lt;li&gt;
          test
      &lt;/li&gt;
      &lt;li&gt;
          test
      &lt;/li&gt;
      &lt;li&gt;
          test
      &lt;/li&gt;
      &lt;li&gt;
          test
      &lt;/li&gt;
      &lt;li&gt;
          test
      &lt;/li&gt;
      &lt;li&gt;
          test
      &lt;/li&gt;
      &lt;li&gt;
          test
      &lt;/li&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So from that the container should have a vertical scroll bar. When the user scrolls I would like it so that when they stop scrolling the final scroll position snaps the container scroll position to the nearest div at shown. This might be difficult as browsers like safari offer momentum as well, so it would have to be an event on scroll end.</p>
  
  <p>Any ideas if this is possible, and how.</p>
  
  <p>Marvellous</p>