Horizontal Scrolling

Developer
Krishna Babu
Size
2,825 Kb
Views
4,048
  1. Horizontal Scrolling Previews
  2. Horizontal Scrolling HTML Codes
  3. Horizontal Scrolling CSS Codes
  4. Horizontal Scrolling JS Codes

How do I make an horizontal scrolling?

Horizontal Page scrolling through mouse wheel. What is a horizontal scrolling? How do you make a horizontal scrolling? This script and codes were developed by Krishna Babu on 11 January 2023, Wednesday.

Horizontal Scrolling Previews
IQ Test

Horizontal Scrolling - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Horizontal Scrolling</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="heading"><h1>Horizontal Scrolling through mouse wheel</h1></div>
<div class="content">	<ul>	<li>	<h2>Lorem ipsum dolor sit amet</h2>	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec tincidunt magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam urna nisi, rutrum sit amet vulputate id, molestie at libero. Etiam lacinia iaculis mauris ut aliquet. Ut eu justo magna. Aenean dictum in velit sit amet semper. Donec sollicitudin ac eros condimentum porttitor. Nullam sed posuere mauris, id hendrerit turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed scelerisque diam.<br/><br/>
Donec at libero eu augue aliquet imperdiet. Nam fringilla et velit eu tempor. Maecenas imperdiet massa id dui lacinia posuere. In hac habitasse platea dictumst. Aliquam iaculis ultrices est vitae iaculis. Maecenas accumsan diam quis dictum facilisis. Quisque pharetra urna vitae mi hendrerit, in facilisis purus gravida. Nulla ut mauris turpis. Aliquam erat volutpat. Etiam rutrum massa turpis, et euismod odio volutpat id.<br/><br/>
Sed id mauris ac arcu feugiat auctor. Pellentesque gravida nunc metus. Curabitur id imperdiet urna. Nam eget diam non urna molestie varius quis eget massa. Integer at libero pellentesque, eleifend tortor ac, faucibus eros. Etiam dignissim ullamcorper enim, ut congue purus consectetur et. Morbi egestas purus quam. Vestibulum id leo rhoncus, varius dui sit amet, mollis tortor. Vestibulum suscipit quis tortor vitae sagittis.</p>	</li>	<li>	<h2>Lorem ipsum dolor sit amet</h2>	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec tincidunt magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam urna nisi, rutrum sit amet vulputate id, molestie at libero. Etiam lacinia iaculis mauris ut aliquet. Ut eu justo magna. Aenean dictum in velit sit amet semper. Donec sollicitudin ac eros condimentum porttitor. Nullam sed posuere mauris, id hendrerit turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed scelerisque diam.<br/><br/>
Donec at libero eu augue aliquet imperdiet. Nam fringilla et velit eu tempor. Maecenas imperdiet massa id dui lacinia posuere. In hac habitasse platea dictumst. Aliquam iaculis ultrices est vitae iaculis. Maecenas accumsan diam quis dictum facilisis. Quisque pharetra urna vitae mi hendrerit, in facilisis purus gravida. Nulla ut mauris turpis. Aliquam erat volutpat. Etiam rutrum massa turpis, et euismod odio volutpat id.<br/><br/>
Sed id mauris ac arcu feugiat auctor. Pellentesque gravida nunc metus. Curabitur id imperdiet urna. Nam eget diam non urna molestie varius quis eget massa. Integer at libero pellentesque, eleifend tortor ac, faucibus eros. Etiam dignissim ullamcorper enim, ut congue purus consectetur et. Morbi egestas purus quam. Vestibulum id leo rhoncus, varius dui sit amet, mollis tortor. Vestibulum suscipit quis tortor vitae sagittis.</p>	</li>	<li>	<h2>Lorem ipsum dolor sit amet</h2>	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec tincidunt magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam urna nisi, rutrum sit amet vulputate id, molestie at libero. Etiam lacinia iaculis mauris ut aliquet. Ut eu justo magna. Aenean dictum in velit sit amet semper. Donec sollicitudin ac eros condimentum porttitor. Nullam sed posuere mauris, id hendrerit turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed scelerisque diam.<br/><br/>
Donec at libero eu augue aliquet imperdiet. Nam fringilla et velit eu tempor. Maecenas imperdiet massa id dui lacinia posuere. In hac habitasse platea dictumst. Aliquam iaculis ultrices est vitae iaculis. Maecenas accumsan diam quis dictum facilisis. Quisque pharetra urna vitae mi hendrerit, in facilisis purus gravida. Nulla ut mauris turpis. Aliquam erat volutpat. Etiam rutrum massa turpis, et euismod odio volutpat id.<br/><br/>
Sed id mauris ac arcu feugiat auctor. Pellentesque gravida nunc metus. Curabitur id imperdiet urna. Nam eget diam non urna molestie varius quis eget massa. Integer at libero pellentesque, eleifend tortor ac, faucibus eros. Etiam dignissim ullamcorper enim, ut congue purus consectetur et. Morbi egestas purus quam. Vestibulum id leo rhoncus, varius dui sit amet, mollis tortor. Vestibulum suscipit quis tortor vitae sagittis.</p>	</li>	<li>	<h2>Lorem ipsum dolor sit amet</h2>	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec tincidunt magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam urna nisi, rutrum sit amet vulputate id, molestie at libero. Etiam lacinia iaculis mauris ut aliquet. Ut eu justo magna. Aenean dictum in velit sit amet semper. Donec sollicitudin ac eros condimentum porttitor. Nullam sed posuere mauris, id hendrerit turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed scelerisque diam.<br/><br/>
Donec at libero eu augue aliquet imperdiet. Nam fringilla et velit eu tempor. Maecenas imperdiet massa id dui lacinia posuere. In hac habitasse platea dictumst. Aliquam iaculis ultrices est vitae iaculis. Maecenas accumsan diam quis dictum facilisis. Quisque pharetra urna vitae mi hendrerit, in facilisis purus gravida. Nulla ut mauris turpis. Aliquam erat volutpat. Etiam rutrum massa turpis, et euismod odio volutpat id.<br/><br/>
Sed id mauris ac arcu feugiat auctor. Pellentesque gravida nunc metus. Curabitur id imperdiet urna. Nam eget diam non urna molestie varius quis eget massa. Integer at libero pellentesque, eleifend tortor ac, faucibus eros. Etiam dignissim ullamcorper enim, ut congue purus consectetur et. Morbi egestas purus quam. Vestibulum id leo rhoncus, varius dui sit amet, mollis tortor. Vestibulum suscipit quis tortor vitae sagittis.</p>	</li>	<li>	<h2>Lorem ipsum dolor sit amet</h2>	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec tincidunt magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam urna nisi, rutrum sit amet vulputate id, molestie at libero. Etiam lacinia iaculis mauris ut aliquet. Ut eu justo magna. Aenean dictum in velit sit amet semper. Donec sollicitudin ac eros condimentum porttitor. Nullam sed posuere mauris, id hendrerit turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed scelerisque diam.<br/><br/>
Donec at libero eu augue aliquet imperdiet. Nam fringilla et velit eu tempor. Maecenas imperdiet massa id dui lacinia posuere. In hac habitasse platea dictumst. Aliquam iaculis ultrices est vitae iaculis. Maecenas accumsan diam quis dictum facilisis. Quisque pharetra urna vitae mi hendrerit, in facilisis purus gravida. Nulla ut mauris turpis. Aliquam erat volutpat. Etiam rutrum massa turpis, et euismod odio volutpat id.<br/><br/>
Sed id mauris ac arcu feugiat auctor. Pellentesque gravida nunc metus. Curabitur id imperdiet urna. Nam eget diam non urna molestie varius quis eget massa. Integer at libero pellentesque, eleifend tortor ac, faucibus eros. Etiam dignissim ullamcorper enim, ut congue purus consectetur et. Morbi egestas purus quam. Vestibulum id leo rhoncus, varius dui sit amet, mollis tortor. Vestibulum suscipit quis tortor vitae sagittis.</p>	</li>	<li>	<h2>Lorem ipsum dolor sit amet</h2>	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec tincidunt magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam urna nisi, rutrum sit amet vulputate id, molestie at libero. Etiam lacinia iaculis mauris ut aliquet. Ut eu justo magna. Aenean dictum in velit sit amet semper. Donec sollicitudin ac eros condimentum porttitor. Nullam sed posuere mauris, id hendrerit turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed scelerisque diam.<br/><br/>
Donec at libero eu augue aliquet imperdiet. Nam fringilla et velit eu tempor. Maecenas imperdiet massa id dui lacinia posuere. In hac habitasse platea dictumst. Aliquam iaculis ultrices est vitae iaculis. Maecenas accumsan diam quis dictum facilisis. Quisque pharetra urna vitae mi hendrerit, in facilisis purus gravida. Nulla ut mauris turpis. Aliquam erat volutpat. Etiam rutrum massa turpis, et euismod odio volutpat id.<br/><br/>
Sed id mauris ac arcu feugiat auctor. Pellentesque gravida nunc metus. Curabitur id imperdiet urna. Nam eget diam non urna molestie varius quis eget massa. Integer at libero pellentesque, eleifend tortor ac, faucibus eros. Etiam dignissim ullamcorper enim, ut congue purus consectetur et. Morbi egestas purus quam. Vestibulum id leo rhoncus, varius dui sit amet, mollis tortor. Vestibulum suscipit quis tortor vitae sagittis.</p>	</li>	<li>	<h2>Lorem ipsum dolor sit amet</h2>	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec tincidunt magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam urna nisi, rutrum sit amet vulputate id, molestie at libero. Etiam lacinia iaculis mauris ut aliquet. Ut eu justo magna. Aenean dictum in velit sit amet semper. Donec sollicitudin ac eros condimentum porttitor. Nullam sed posuere mauris, id hendrerit turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed scelerisque diam.<br/><br/>
Donec at libero eu augue aliquet imperdiet. Nam fringilla et velit eu tempor. Maecenas imperdiet massa id dui lacinia posuere. In hac habitasse platea dictumst. Aliquam iaculis ultrices est vitae iaculis. Maecenas accumsan diam quis dictum facilisis. Quisque pharetra urna vitae mi hendrerit, in facilisis purus gravida. Nulla ut mauris turpis. Aliquam erat volutpat. Etiam rutrum massa turpis, et euismod odio volutpat id.<br/><br/>
Sed id mauris ac arcu feugiat auctor. Pellentesque gravida nunc metus. Curabitur id imperdiet urna. Nam eget diam non urna molestie varius quis eget massa. Integer at libero pellentesque, eleifend tortor ac, faucibus eros. Etiam dignissim ullamcorper enim, ut congue purus consectetur et. Morbi egestas purus quam. Vestibulum id leo rhoncus, varius dui sit amet, mollis tortor. Vestibulum suscipit quis tortor vitae sagittis.</p>	</li>	<li>	<h2>Lorem ipsum dolor sit amet</h2>	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec tincidunt magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam urna nisi, rutrum sit amet vulputate id, molestie at libero. Etiam lacinia iaculis mauris ut aliquet. Ut eu justo magna. Aenean dictum in velit sit amet semper. Donec sollicitudin ac eros condimentum porttitor. Nullam sed posuere mauris, id hendrerit turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed scelerisque diam.<br/><br/>
Donec at libero eu augue aliquet imperdiet. Nam fringilla et velit eu tempor. Maecenas imperdiet massa id dui lacinia posuere. In hac habitasse platea dictumst. Aliquam iaculis ultrices est vitae iaculis. Maecenas accumsan diam quis dictum facilisis. Quisque pharetra urna vitae mi hendrerit, in facilisis purus gravida. Nulla ut mauris turpis. Aliquam erat volutpat. Etiam rutrum massa turpis, et euismod odio volutpat id.<br/><br/>
Sed id mauris ac arcu feugiat auctor. Pellentesque gravida nunc metus. Curabitur id imperdiet urna. Nam eget diam non urna molestie varius quis eget massa. Integer at libero pellentesque, eleifend tortor ac, faucibus eros. Etiam dignissim ullamcorper enim, ut congue purus consectetur et. Morbi egestas purus quam. Vestibulum id leo rhoncus, varius dui sit amet, mollis tortor. Vestibulum suscipit quis tortor vitae sagittis.</p>	</li>	<li>	<h2>Lorem ipsum dolor sit amet</h2>	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec tincidunt magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam urna nisi, rutrum sit amet vulputate id, molestie at libero. Etiam lacinia iaculis mauris ut aliquet. Ut eu justo magna. Aenean dictum in velit sit amet semper. Donec sollicitudin ac eros condimentum porttitor. Nullam sed posuere mauris, id hendrerit turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed scelerisque diam.<br/><br/>
Donec at libero eu augue aliquet imperdiet. Nam fringilla et velit eu tempor. Maecenas imperdiet massa id dui lacinia posuere. In hac habitasse platea dictumst. Aliquam iaculis ultrices est vitae iaculis. Maecenas accumsan diam quis dictum facilisis. Quisque pharetra urna vitae mi hendrerit, in facilisis purus gravida. Nulla ut mauris turpis. Aliquam erat volutpat. Etiam rutrum massa turpis, et euismod odio volutpat id.<br/><br/>
Sed id mauris ac arcu feugiat auctor. Pellentesque gravida nunc metus. Curabitur id imperdiet urna. Nam eget diam non urna molestie varius quis eget massa. Integer at libero pellentesque, eleifend tortor ac, faucibus eros. Etiam dignissim ullamcorper enim, ut congue purus consectetur et. Morbi egestas purus quam. Vestibulum id leo rhoncus, varius dui sit amet, mollis tortor. Vestibulum suscipit quis tortor vitae sagittis.</p>	</li>	</ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.6/jquery.mousewheel.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Horizontal Scrolling - Script Codes CSS Codes

*{margin:0px; padding:0px;}
@import url(https://fonts.googleapis.com/css?family=Raleway:400,900);
body{background-color:#000;color:#fff;font-family:tahoma;overflow: hidden;font-family: 'Raleway', sans-serif;}
.heading{padding:10px;position:relative;float:left;}
.content{position:relative;float:left;width:100%;overflow:hidden;}
.content h2{text-transform:uppercase;padding-bottom:10px;}
.content p{font-size:12px;}
.content ul{list-style:none;width:4700px;float:left;}
.content ul li{padding:10px;float:left;width:500px;}

Horizontal Scrolling - Script Codes JS Codes

/* Javascript Document */
$( document ).ready(function() {	$('.content').mousewheel(function(event, delta) {	event.preventDefault();	this.scrollLeft -= (delta * 30);	return false;	});
});
Horizontal Scrolling - Script Codes
Horizontal Scrolling - Script Codes
Home Page Home
Developer Krishna Babu
Username krishnab
Uploaded January 11, 2023
Rating 3.5
Size 2,825 Kb
Views 4,048
Do you need developer help for Horizontal Scrolling?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Krishna Babu (krishnab) Script Codes
Name
Slide Transition
Wipe slider
Page
Concentration Game
No effect slideshow
AngularJs Combobox
Paging
Customize Selector with Google Font
Floating menu
Delhi Metro
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!