A new (maybe not) and user-friendly way to scroll webpage horizontally.
$(window).on( "load", function() {
$("#vertical-container").css({
height: $('#contents').width() - $(window).width() + $(window).height()
});
$(window).on('scroll', function () {
$("#contents").css({
transform: "translateX(-" + window.scrollY + "px)"
});
});
});
.horizontal-container {
position: fixed;
top: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}
#contents {
height: 100%;
display: flex;
align-self: flex-end;
position: absolute;
}
$("#vertical-container").css({
height: $('#contents').width() - $(window).width() + $(window).height()
});
$(window).on('scroll', function () {
$("#contents").css({
transform: "translateX(-" + window.scrollY + "px)"
});
});
$(window).on( "load", function() {
$("#vertical-container").css({
height: $('#contents').width() - $(window).width() + $(window).height()
});
$(window).on('scroll', function () {
$("#contents").css({
transform: "translateX(-" + window.scrollY + "px)"
});
});
});