Horizontal scrolling w/ mousewheel test

In this example below you will see how to do a Horizontal scrolling w/ mousewheel test with some HTML / CSS and Javascript

Couldn't find a horizontal layout I was looking for, so... what do I do? Experiment on CodePen!

Thumbnail
This awesome code was written by Ovoce, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Ovoce ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Horizontal scrolling w/ mousewheel test</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="page-wrap">
		
		<div class="post">
			<h2>One</h2>
			<p>By Ovi Ovocný</p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse aliquet arcu a ipsum. Nunc arcu est, pulvinar vitae, consectetuer ac, pellentesque interdum, augue. Fusce iaculis nulla et sapien. Aliquam erat volutpat. Etiam iaculis turpis nec libero. Nam adipiscing ullamcorper quam. Pellentesque erat. Sed hendrerit. Duis id nisl. Cras arcu mauris, mollis vel, convallis non, elementum a, tortor. Donec ac est eget elit consequat sollicitudin. In id odio quis tortor volutpat mollis. Nulla iaculis lobortis est. Pellentesque in elit vitae nulla tempus euismod. Nam non erat in lacus rutrum malesuada. Donec commodo purus sed quam posuere eleifend. Nam accumsan.Cras arcu mauris, mollis vel, convallis non, elementum a, tortor. Donec ac est eget elit consequat sollicitudin. In id odio quis tortor volutpat mollis. Nulla iaculis lobortis est. Pellentesque in elit vitae nulla tempus euismod. Nam non erat in lacus rutrum malesuada. Donec commodo purus sed quam posuere eleifend. Nam accumsan.</p>
			
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse aliquet arcu a ipsum. Nunc arcu est, pulvinar vitae, consectetuer ac, pellentesque interdum, augue. Fusce iaculis nulla et sapien. Aliquam erat volutpat. Etiam iaculis turpis nec libero. Nam adipiscing ullamcorper quam. Pellentesque erat. Sed hendrerit. Duis id nisl. Cras arcu mauris, mollis vel, convallis non, elementum a, tortor. Donec ac est eget elit consequat sollicitudin. In id odio quis tortor volutpat mollis. Nulla iaculis lobortis est. Pellentesque in elit vitae nulla tempus euismod. Nam non erat in lacus rutrum malesuada. Donec commodo purus sed quam posuere eleifend. Nam accumsan.</p>
		</div>
		
		<div class="post">
			<h2>Too (long)</h2>
			<p>By Ovi Ovocný</p>
<p>Click "Read all" to enable scrolling, then any other post to return to horizontal scrolling.</p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse aliquet arcu a ipsum. Nunc arcu est, pulvinar vitae, consectetuer ac, pellentesque interdum, augue. Fusce iaculis nulla et sapien. Aliquam erat volutpat. Etiam iaculis turpis nec libero. Nam adipiscing ullamcorper quam. Pellentesque erat. Sed hendrerit. Duis id nisl. Cras arcu mauris, mollis vel, convallis Cras arcu mauris, mollis vel, convallis non, elementum a, tortor. Donec ac est eget elit consequat sollicitudin. In id odio quis tortor volutpat mollis. Nulla iaculis lobortis est. Pellentesque in elit vitae nulla tempus euismod. Nam non erat in lacus rutrum malesuada. Donec commodo purus sed quam posuere eleifend. Nam accumsan.Cras arcu mauris, mollis vel, convallis non, elementum a, tortor. Donec ac est eget elit consequat sollicitudin. In id odio quis tortor volutpat mollis. Nulla iaculis lobortis est. Pellentesque in elit vitae nulla tempus euismod. Nam non erat in lacus rutrum malesuada. Donec commodo purus sed quam posuere eleifend. Nam accumsan.Cras arcu mauris, mollis vel, convallis non, elementum a, tortor. Donec ac est eget elit consequat sollicitudin. In id odio quis tortor volutpat mollis. Nulla iaculis lobortis est. Pellentesque in elit vitae nulla tempus euismod. Nam non erat in lacus rutrum malesuada. Donec commodo purus sed quam posuere eleifend. Nam accumsan.non, elementum a, tortor. Donec ac est eget elit consequat sollicitudin. In id odio quis tortor volutpat mollis. Nulla iaculis lobortis est. Pellentesque in elit vitae nulla tempus euismod. Nam non erat in lacus rutrum malesuada. Donec commodo purus sed quam posuere eleifend. Nam accumsan.</p>
			
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse aliquet arcu a ipsum. Nunc arcu est, pulvinar vitae, consectetuer ac, pellentesque interdum, augue. Fusce iaculis nulla et sapien. Aliquam erat volutpat. Etiam iaculis turpis nec libero. Nam adipiscing ullamcorper quam. Pellentesque erat. Sed hendrerit. Duis id nisl. Cras arcu mauris, mollis vel, convallis non, elementum a, tortor. Donec ac est eget elit consequat sollicitudin. In id odio quis tortor volutpat mollis. Nulla iaculis lobortis est. Pellentesque in elit vitae nulla tempus euismod. Nam non erat in lacus rutrum malesuada. Donec commodo purus sed quam posuere eleifend. Nam accumsan. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia deleniti libero iste a aliquam ut expedita modi, sapiente culpa quia sequi quisquam numquam suscipit voluptatibus excepturi sit. Sint atque impedit itaque aliquam eum numquam dicta sapiente. Libero officiis est velit rerum fuga perferendis dolor, a. Repellendus unde, consectetur illo alias mollitia quos distinctio repellat animi nihil, voluptas quo quaerat explicabo perferendis ea soluta et eos maxime quisquam dolorem necessitatibus earum non aut fugiat inventore. Distinctio explicabo hic, excepturi molestias! Autem adipisci molestiae facilis facere magni, consequatur distinctio. Rem, ipsa, perferendis? Iure beatae, reiciendis, alias tenetur, fugit consequuntur, officia laudantium tempora eius dolor eligendi. Excepturi magnam iste fuga ab, perspiciatis distinctio alias rem accusamus nesciunt! Cumque sint sapiente corporis deserunt architecto repudiandae, officia dolorem optio eius quas quam rerum praesentium sequi qui obcaecati, tempore dolores. Aut aperiam, dolorem! Veniam qui perspiciatis voluptas molestiae velit tempore excepturi numquam perferendis. Voluptate atque ex nulla, quibusdam, commodi velit. Earum suscipit exercitationem debitis, facilis eius necessitatibus aut molestiae sed assumenda, omnis doloribus nemo, odio nisi perspiciatis neque quidem. Unde vitae iure deserunt doloribus, iusto quos, quis laudantium ad cupiditate quibusdam ut odit, explicabo ducimus eius. Iure quisquam nostrum consequatur quia maiores nihil corporis tenetur nam!</p>
			
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse aliquet arcu a ipsum. Nunc arcu est, pulvinar vitae, consectetuer ac, pellentesque interdum, augue. Fusce iaculis nulla et sapien. Aliquam erat volutpat. Etiam iaculis turpis nec libero. Nam adipiscing ullamcorper quam. Pellentesque erat. Sed hendrerit. Duis id nisl. Cras arcu mauris, mollis vel, convallis non, elementum a, tortor. Donec ac est eget elit consequat sollicitudin. In id odio quis tortor volutpat mollis. Nulla iaculis lobortis est. Pellentesque in elit vitae nulla tempus euismod. Nam non erat in lacus rutrum malesuada. Donec commodo purus sed quam posuere eleifend. Nam accumsan.</p>
		</div>
	
  <div class="post">
			<h2>Three</h2>
			<p>By Plasty Plastový</p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse aliquet arcu a ipsum. Nunc arcu est, pulvinar vitae, consectetuer ac, pellentesque interdum, augue. Fusce iaculis nulla et sapien. Aliquam erat volutpat. Etiam iaculis turpis nec libero. Nam adipiscing ullamcorper quam. Pellentesque erat. Sed hendrerit. Duis id nisl. Cras arcu mauris, mollis vel, convallis non, elementum a, tortor. Donec ac est eget elit consequat sollicitudin. In id odio quis tortor volutpat mollis. Nulla iaculis lobortis est. Pellentesque in elit vitae nulla tempus euismod. Nam non erat in lacus rutrum malesuada. Donec commodo purus sed quam posuere eleifend. Nam accumsan.Cras arcu mauris, mollis vel, convallis non, elementum a, tortor. Donec ac est eget elit consequat sollicitudin. In id odio quis tortor volutpat mollis. Nulla iaculis lobortis est. Pellentesque in elit vitae nulla tempus euismod. Nam non erat in lacus rutrum malesuada. Donec commodo purus sed quam posuere eleifend. Nam accumsan.</p>
	
		</div>
  
  <div class="post">
			<h2>Flour</h2>
			<p>By Mouky Moučkový</p>
			<p>Flour is cool! Yeeeaaaaaaaaaaaaaaaaaaaa...</p>
			
			<p>This is short...</p>
		</div>
  
  <div class="post">
			<h2>Five</h2>
			<p>By Zeli Zeleninový</p>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse aliquet arcu a ipsum. Nunc arcu est, pulvinar vitae, consectetuer ac, pellentesque interdum, augue. Fusce iaculis nulla et sapien. Aliquam erat volutpat. Etiam iaculis turpis nec libero. Nam adipiscing ullamcorper quam. Pellentesque erat. Sed hendrerit. Duis id nisl. Cras arcu mauris, mollis vel, convallis non, elementum, mollis vel, convallis non, elementum a, tortor. Donec ac est eget elit consequat sollicitudin. In id odio quis tortor volutpat mollis. Nulla iaculis lobortis est. Pellentesque in elit vitae nulla tempus euismod. Nam non erat in lacus rutrum malesuada. Donec commodo purus sed quam posuere eleifend. Nam accumsan.</p>
			
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse aliquet arcu a ipsum. Nunc arcu est, pulvinar vitae, consectetuer ac, pellentesque interdum, augue. Fusce iaculis nulla et sapien. Aliquam erat volutpat. Etiam iaculis turpis nec libero. Nam adipiscing ullamcorper quam. Pellentesque erat. Sed hendrerit. Duis id nisl. Cras arcu mauris, mollis vel, convallis non, elementum a, tortor. Donec ac est eget elit consequat sollicitudin. In id odio quis tortor volutpat mollis. Nulla iaculis lobortis est. Pellentesque in elit vitae nulla tempus euismod. Nam non erat in lacus rutrum malesuada. Donec commodo purus sed quam posuere eleifend. Nam accumsan.</p>
		</div>
  
	</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Ovoce/horizontal-scrolling-with-mousewheel-test-ByePZJ */
body {
  overflow-y: hidden;
}
.post {
  width: 500px;
}
tr {
  vertical-align: top;
}
td {
  padding: 30px;
}
.expand {
  position: absolute;
  bottom: 0;
  width: 500px;
  height: 70px;
  background: linear-gradient(rgba(255,255,255,0.8), #fff);
  text-align: center;
  line-height: 70px;
  cursor: pointer;
}


/*Downloaded from https://www.codeseek.co/Ovoce/horizontal-scrolling-with-mousewheel-test-ByePZJ */
function scroller() {
		$('html, body').mousewheel(function(event, delta) {
			sl=delta*130;
			$('html, body').stop(true,true).animate({scrollLeft: '-='+sl},50);
			event.preventDefault();
		});
};

$(document).ready(function(){
  $("#page-wrap").wrapInner("<table cellspacing='30'><tr>");
		$(".post").wrap("<td></td>");
  scroller();
});

$(".post").each(function(){
  if ($( this ).height() > window.innerHeight) {
    $( this ).append("<div class='expand'>Read all</div>")
}
});

var idx;

$(".expand").click(function(){
  idx = $( this ).parent().index();
  $( this ).animate({opacity: 0}, 200);
  $(".post").not( ".post:has(.expand)" ).animate({opacity: .3}, 200);
  $('html, body').unmousewheel();
  $( this ).parent().mousewheel(function(event, delta) {
			sl=delta*150;
			$(this).stop(true,true).animate({marginTop: '+='+sl},50);
			event.preventDefault();
		});
});

$(".post").not( ".post:has(.expand)" ).click(function(){
  scroller();
  $(".post, .expand").animate({opacity: 1, marginTop: 0}, 250);
  $(".post").unmousewheel();
})

Comments