pull to close / momentum feedback

gistfile1.txt

<style>
body {
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;
}
#container{
 position:absolute;
 top:0;
 bottom:0;
 left:0; 
 right:0;
 -webkit-overflow-scrolling:touch;
 overflow:scroll;
 background:url(http://lorempixel.com/400/200) no-repeat left top;
}  
#content { 
  opacity:0.99 ; /*hack to get the background thing to work -- if i set the opacity to 1, for some reason i just see a white background (maybe its some kind of browser optimization wherein the browser doesnt render a background if it doesnt think that background will be visible -- setting opacity to 0.99 makes it so that the background is visible and therefore needs to be rendered */
                 /*wait no its even weirder than that, I need to set opacity to 1 first, then literally edit the code, setting it to 0.99*/
                /*not sure if it has to do with opacity or if it just has to do with a repaint - hmmm*/
 background-color:red;  
}
#fixed-container {
  position:fixed;
 top:0;
 bottom:0;
 left:0; 
 right:0;
}

</style>
<div id='fixed-container'>
  <div id='container'>
    <div id='content'>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget dui dignissim mi vehicula gravida. Sed faucibus suscipit sapien ut elementum. Curabitur auctor, odio vitae luctus lacinia, quam felis ultrices turpis, eu vulputate libero massa sed leo. Quisque eu gravida orci. Ut eu diam lacus. Nulla scelerisque tellus libero, nec interdum tortor facilisis vitae. Ut viverra consectetur nisl, vel placerat lectus ultricies eu. Quisque eget purus fermentum, pharetra felis at, aliquam erat. Curabitur scelerisque consectetur nulla, id dictum turpis volutpat at. Duis vel augue ac metus sagittis tristique. Ut semper iaculis nibh, quis ultrices enim dignissim vel. Fusce ac semper est. Etiam cursus ac velit in feugiat. Aenean id mattis neque. Maecenas id malesuada tortor, eu convallis metus. Suspendisse rutrum ut arcu sed aliquam.
  
  Morbi suscipit sapien nec turpis aliquet pharetra. Aliquam pretium eget augue id tincidunt. Aenean aliquet gravida magna ut suscipit. Donec iaculis placerat metus. Maecenas aliquam, nisl at porttitor tincidunt, felis urna mollis nulla, vitae tincidunt sem augue in diam. Donec ut lacus vitae nulla varius tincidunt. Quisque imperdiet ut ligula quis imperdiet. Duis tortor arcu, sodales sit amet augue vitae, dapibus semper nunc. Mauris est elit, dignissim non nisi eu, placerat dictum erat. Quisque vitae molestie magna, a ullamcorper nibh. Nunc adipiscing turpis mi, eget placerat est hendrerit non. Curabitur at diam sed nulla convallis adipiscing. Curabitur id venenatis dui, sed rhoncus neque. Cras porta elementum nulla, et porttitor nisi bibendum ac. Nam et consequat nunc.
  
  Praesent tincidunt faucibus ante, vitae hendrerit lacus eleifend nec. Integer ullamcorper gravida quam, vel placerat dolor porta ac. Fusce elementum erat dapibus diam mattis volutpat. Aenean sed auctor enim. Curabitur magna nunc, ultricies at nunc et, fringilla ullamcorper massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque aliquet fringilla interdum. Fusce eget accumsan ipsum. Donec pulvinar hendrerit gravida. Cras mattis fermentum quam sed eleifend. Maecenas commodo massa at purus vulputate, id laoreet leo tempor. Vestibulum consequat sapien felis, ac consequat libero lobortis eu. Fusce lobortis nibh quis vehicula rhoncus. Aenean ultrices quis sapien sit amet tristique. Phasellus semper enim ut posuere congue.
  
  Cras sodales magna et enim hendrerit, sit amet consequat erat semper. Vestibulum sed lacus et mi consectetur mattis. Etiam vel nisi pellentesque, pharetra ipsum a, gravida odio. Suspendisse in dictum est, id gravida felis. Sed ut ante rutrum, imperdiet risus id, ullamcorper tortor. Duis mollis gravida dolor id eleifend. Suspendisse potenti. Aenean id elementum augue, id dictum quam. Suspendisse ultrices, purus ut rhoncus venenatis, erat lacus tempus nisl, vitae pharetra lorem purus sit amet dolor. Quisque vel mollis felis.
  
  Aliquam erat volutpat. Sed ligula libero, pulvinar egestas lobortis vel, vehicula facilisis nulla. Donec dictum dolor eget nisl ullamcorper, a gravida orci sollicitudin. Vivamus fringilla at odio sed tristique. Sed pretium justo vel commodo interdum. Nam quis facilisis metus. Vivamus vitae dapibus justo, a sodales odio. Fusce luctus egestas lectus sit amet volutpat. Donec non condimentum justo, ac ullamcorper velit. Fusce arcu justo, adipiscing vel fermentum eget, dapibus id dui. Cras vel congue odio.
    </div> 
    
  </div>
</div>

<script data-scratchpad-rerender>

  container = document.querySelector('#container')
  
  container.addEventListener('scroll', function (event) {

  })
  
  container.addEventListener('touchstart', function(evt) {

  })
  

  
function getElementScrollScale(domElement){
  return domElement.scrollTop / (domElement.scrollHeight - domElement.clientHeight)
}

function  mobileScrollFix(el) {
  el.addEventListener('touchstart', function() {
    var top = el.scrollTop 
      , totalScroll = el.scrollHeight
      , currentScroll = top + el.offsetHeight

    if(top === 0) {
      el.scrollTop = 1
    } else if(currentScroll === totalScroll) {
      el.scrollTop = top - 1
    }
  })

  el.addEventListener('touchmove', function(evt) {
    evt._isScroller = true
  })
}

document.body.addEventListener('touchmove', function(evt) {
  if(!evt._isScroller) {
    evt.preventDefault()
  }
})
 
mobileScrollFix(container)
</script>