Skip to content

Instantly share code, notes, and snippets.

@adamay000

adamay000/status-bar-tap-event.html

Created July 1, 2016 08:00
Show Gist options
  • Save adamay000/5ae185562333d58f1ff3c56c347edfee to your computer and use it in GitHub Desktop.
Save adamay000/5ae185562333d58f1ff3c56c347edfee to your computer and use it in GitHub Desktop.
Download ZIP
google mailでステータスバーをタップしたときのイベントを取っているような動きの再現
Raw
status-bar-tap-event.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment