Description:
Horizontal scrolling is a page navigation method in which the user scrolls left and right to reveal content from the sides of the window or container.The scroll wheel causes the page to move horizontally across the screen rather than vertically.
How to use:
In this example, I’ve created a <div> container element with a width of 500 pixels. Inside this <div> container is a <p> child element with a set width of 1000 pixels. Since the width of <p> exceeds the width of <div>, the text overflows to the right of the container. Use CSS to specify a set width for the container and apply scroll behavior. Setting overflow-x: scroll to the container <div> renders a scrollbar inside it.Then add js code for looping horizontzl scroll.
Code:
var page = document.getElementById('page');
var last_pane = page.getElementsByClassName('pane');
last_pane = last_pane[last_pane.length-1];
var dummy_x = null; window.onscroll = function () {
// Horizontal Scroll.
var y = document.body.getBoundingClientRect().top;
page.scrollLeft = -y;
// Looping Scroll.
var diff = window.scrollY - dummy_x;
if (diff > 0) {
window.scrollTo(0, diff);
}
else if (window.scrollY == 0) {
window.scrollTo(0, dummy_x);
}
}
// Adjust the body height if the window resizes.
window.onresize = resize;
// Initial resize.
resize(); // Reset window-based vars
function resize() {
var w = page.scrollWidth-window.innerWidth+window.innerHeight;
document.body.style.height = w + 'px';
dummy_x = last_pane.getBoundingClientRect().left+window.scrollY;
}