Skip to content

Instantly share code, notes, and snippets.

@iiic
Created November 11, 2019 15:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save iiic/8d7b7fceeeffbdcd560f72b4314d8e06 to your computer and use it in GitHub Desktop.
Save iiic/8d7b7fceeeffbdcd560f72b4314d8e06 to your computer and use it in GitHub Desktop.
'use strict';
const MIN_SCROLL_TIME = 250; // in ms
const JS_WORKING_ONLY_CLASSNAME = 'js';
const UP_ARROW_CODE = 38;
const DOWN_ARROW_CODE = 40;
const slideIds = [];
[ ...document.getElementsByTagName( 'main' )[ 0 ].children ].forEach( ( /** @type {HTMLElement} */ item ) => {
item.classList.add( JS_WORKING_ONLY_CLASSNAME );
slideIds.push( item.id );
} );
const footer = document.querySelector( 'body>footer' );
footer.hidden = true;
document.addEventListener( 'touchstart', handleTouchStart, false );
document.addEventListener( 'touchmove', handleTouchMove, false );
document.addEventListener( 'touchend', handleTouchEnd, false );
document.addEventListener( 'touchcancel', handleTouchEnd, false );
var xDown = null;
var yDown = null;
var doTouchBreak = null;
var minDelta = 100;
function handleTouchEnd() {
doTouchBreak = null;
};
function handleTouchStart( evt ) {
xDown = evt.touches[ 0 ].clientX;
yDown = evt.touches[ 0 ].clientY;
};
function handleTouchMove( evt ) {
if ( !xDown || !yDown || doTouchBreak ) { return; }
var xUp = evt.touches[ 0 ].clientX;
var yUp = evt.touches[ 0 ].clientY;
var xDiff = xDown - xUp;
var yDiff = yDown - yUp;
if ( Math.abs( yDiff ) > Math.abs( xDiff ) )
{
if ( yDiff > minDelta )
{
slide( +1 );
doTouchBreak = true;
} else if ( yDiff < -minDelta )
{
slide( -1 );
doTouchBreak = true;
}
}
if ( doTouchBreak )
{
xDown = null;
yDown = null;
}
};
const slide = ( /** @type {Number} */ direction ) => {
const currentPosition = slideIds.indexOf( window.location.hash.substr( 1 ) );
let newPosition = currentPosition + direction;
if ( newPosition < slideIds.length )
{
if ( direction === -1 && newPosition === slideIds.length - 2 && !footer.hidden )
{
footer.hidden = true;
} else if ( newPosition >= 0 )
{
window.location.hash = slideIds[ newPosition ];
}
} else
{
footer.hidden = false;
window.scrollTo( {
left: 0,
top: document.body.scrollHeight,
behavior: 'smooth'
} );
}
return true;
};
document.addEventListener( 'keydown', ( /** @type {KeyboardEvent} */ event ) => {
if ( event.keyCode === UP_ARROW_CODE )
{
slide( -1 );
} else if ( event.keyCode === DOWN_ARROW_CODE )
{
event.preventDefault();
slide( +1 );
}
}, false );
document.addEventListener( 'wheel', ( /** @type {WheelEvent} */ event ) => {
if ( !this.prevTimeStamp )
{
this.prevTimeStamp = 0;
}
if ( ( event.timeStamp - this.prevTimeStamp ) > MIN_SCROLL_TIME )
{
slide( ( event.deltaY < 0 ) ? -1 : +1 );
}
this.prevTimeStamp = event.timeStamp;
}, false );
@iiic
Copy link
Author

iiic commented Feb 13, 2020

scrollovátko na částech webů, prezentuje bloky na obrozovku bez scrollování

@iiic
Copy link
Author

iiic commented Feb 13, 2020

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment