Untitled

<!DOCTYPE html>
<html>
  <head>
    <title>status-bar tap event</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
  </head>
  <body style="margin: 0;">
    <div id="hidden-header" style="position: relative; z-index: 2; background: #808080;">hidden-header</div>
    <div id="header" style="position: relative; z-index: 2; background: #cccccc;">header</div>
    <div id="container" style="overflow: auto; position: relative; z-index: 1;">
      <div id="scrollable">
        <div id="dummy-content" style="height: 2000px; background: linear-gradient(to bottom, #ffffff 0%, #000000 100%);">
          <p>dummy</p>
          <p>dummy</p>
          <p>dummy</p>
          <p>dummy</p>
          <p>dummy</p>
          <p>dummy</p>
          <p>dummy</p>
          <p>dummy</p>
          <p>dummy</p>
          <p>dummy</p>
          <p>dummy</p>
          <p>dummy</p>
          <p>dummy</p>
          <p>dummy</p>
          <p>dummy</p>
          <p>dummy</p>
          <p>dummy</p>
          <p>dummy</p>
          <p>dummy</p>
          <p>dummy</p>
        </div>
      </div>
    </div>

    <script type="text/javascript">
var $body         = document.body || document.getElementsByTagName('body')[0];
var $hiddenHeader = document.getElementById('hidden-header');
var $header       = document.getElementById('header');
var $container    = document.getElementById('container');
var $scrollable   = document.getElementById('scrollable');

var HEADER_HEIGHT = 60;
var containerHeight = window.innerHeight - HEADER_HEIGHT;

$hiddenHeader.style.height = HEADER_HEIGHT + 'px';
$header.style.height = HEADER_HEIGHT + 'px';
$container.style.height = containerHeight + 'px';
$body.style.height = (containerHeight + HEADER_HEIGHT * 2) + 'px';

//
// detect status-bar tap
//
var isTouching = false;
window.addEventListener('touchstart', function () {
  isTouching = true;
})
window.addEventListener('touchend', function () {
  isTouching = false;
})
window.addEventListener('scroll', function () {
  // wait while touching
  if ($body.scrollTop === 0 && !isTouching) {
    console.log('status-bar is probably tapped because scrollTop is returned to zero');
    scrollContainer(0, currentScrollTop);
  }
});

//
// container scroll
//

var currentScrollTop = 0;

var lastTouchedScreenY;
$container.addEventListener('touchstart', function (event) {
  lastTouchedScreenY = event.changedTouches[0].screenY;
});
$container.addEventListener('touchmove', function (event) {
  event.preventDefault();

  // need to set scrollTop not zero
  hideHiddenHeader();

  var deltaY = lastTouchedScreenY - event.changedTouches[0].screenY;
  var newScrollTop = currentScrollTop + deltaY;
  newScrollTop < 0 && (newScrollTop = 0);
  newScrollTop > $container.innerHeight - containerHeight && (newScrollTop = $container.innerHeight - containerHeight);
  scrollContainer(newScrollTop);

  lastTouchedScreenY = event.changedTouches[0].screenY;
});

var isAnimate = false;
var animationLoop;
function scrollContainer(scrollTop, duration, startTime) {
  startTime || (startTime = +new Date);
  var elapsedTime = +new Date - startTime;
  if (duration && isAnimate) {
    return;
  }
  if (duration && elapsedTime <= duration) {
    var progress = elapsedTime / duration;
    progress > 1 && (progress = 1);
    var _scrollTop = currentScrollTop + (scrollTop - currentScrollTop) * (1 - Math.pow(1 - progress, 4));
    $scrollable.style.transform = $scrollable.style['-webkit-transform'] = 'translate(0, ' + (-_scrollTop) + 'px) translate3d(0, 0, 0)';

    setTimeout(function () {
      scrollContainer(scrollTop, duration, startTime);
    }, 17)
    return;
  }
  clearTimeout(animationLoop);
  isAnimate = false;

  currentScrollTop = scrollTop;
  $scrollable.style.transform = $scrollable.style['-webkit-transform'] = 'translate(0, ' + (-scrollTop) + 'px) translate3d(0, 0, 0)';
}

//
// hide #hidden-header
//

function hideHiddenHeader() {
  window.scrollTo(0, HEADER_HEIGHT);
}

setTimeout(function () {
  hideHiddenHeader();
}, 500);
    </script>
  </body>
</html>