Tutorial: How to make a Horizontal Scrolling Page

Hi!

Please, can someone make step by step manual how to make Horizontal Scrolling Website with working scroll-weel. That’s very important for me.

Example 1: Horizontally Scrolling Site from CSS-Tricks
Example 2: http://www.studio-voo.com/portfolio/photo-acteurs/

ON FIRE

Thanks!!!

Hi guys and girls, we love tutorial requests :slight_smile: I’ll give a prize to the maker of this tutorial request :slight_smile: Cheers,
Dave

This website is built horizontaly. The mousewheel is working thanks to the script:

$("body").mousewheel(function(event, delta) {
	this.scrollLeft -= (delta * 30);
	event.preventDefault();
});

You’re welcome :)

1 Like

Hi @bartekkustra, you da man, do you have an example link with that code? Cheers,
Dave

Let’s start with creating a section in which we will have our horizontal div :)

I have given this section a class name .ninja-tricks but you can have whatever you want :) The point is to make a style of overflow: hidden; in this class as shown below.

Now let’s drop a div inside our section and call it .page-wrap. This object will not have any styles within as it will be expanded by JavaScript Code.

I’ve created a div and gave it a 600px width, but you can style however you want it. These will contain some informations. These are those blocks that you will have on your horizontal website. While in designer mode it might not look as awesome as it will in the end - you have to trust me and just do that. This is what it looks like on my tutorial website.

As you can see it’s nothing fancy, but it will be awesome in just a moment. Notice, that I have created a padding and margin on each. I did that because I didn’t want to have those boxes be one next to another. Once you got this just publish the website and… it’s not working :) We still need to add some nice javascript!


My favorite part now :D As you can see at the image below I have created 6 divs, named them .div-600px and put some paragraphs inside to have at least some content. The important part is the name of the class here. Whatever you call your class here (in my example it’s div-600px you have to remember, because we will write a code for it in a moment.

Let’s head to the Custom Code part in your site dashboard. We will put some crazy stuff in Footer Code.

First of all we need to call a script that make the mousewheel or scrolling work. Just paste it in the first line of code:

<script src="https://css-tricks.com/examples/HorzScrolling/jquery.mousewheel.js"></script>

Now we have to write our code… Let’s go line-by-line so I can explain each one of them.

<script>

Because we have to tell the browser we’ll have a script here.

$(function() {

We are opening a function that is called immediately.

overallwidth = 0;

Creates a variable overallwidth in which we will store a size of the entire object. The one that holds all small divs.

$('.div-600px').each(function() {
    overallwidth = overallwidth + $(this).width() + parseInt($(this).css('padding-left')) + parseInt($(this).css('padding-right')) + parseInt($(this).css('margin-left')) + parseInt($(this).css('margin-right'));
});

Ok this might look really bad… but it’s actually pretty simple. It stands for: **for each object with class name .div-600px set the variable of overallwidth to be the size of the current variable value and add the width of this div (.div-600px) that you calculate, and add all left-right margins and left-right paddings. **

I understand it looks complex but it is really not. See each + sign is to add something else. We’re adding here:

  • overallwidth - current value
  • $(this).width() - the size of this object (we’re pointing to the .div-600px)
  • parseInt($(this).css('padding-left')) - we’re getting the value of left padding of this object. And because it is returned as eg. 10px we have to use parseInt() function to get only the numerical value as an integer. We’re doing the same for padding-right, margin-left and margin-right.

Let’s move forward…

$('.page-wrap').css('width', overallwidth);

This part of code sets the width of the .page-wrap object to the exact size we have calculated.

So if we have as in my example 6 divs each 600px, we have to take the padding from each which gives us 6 divs 580px each (I have 10 padding on left and right). Now each div has a padding-left: 10px; padding-right: 10px; margin-left: 10px; margin-right: 10px; which adds up to 40px. This means that each div require 580px + 40px. A total of 6 * 620px gives us 3720px of .page-wrap width. See?

});

Now we have to end the code by closing remaining brackets in the proper order.

$('.ninja-tricks').mousewheel(function(event, delta) {
	this.scrollLeft -= (delta * 50);
	event.preventDefault();
});

Ok… this little script here works thanks to the first line of code we wrote - calling a javascript library that handles the mousewheel functionality. We’re targeting the .ninja-tricks here so the script will only “work” for this particular object. Don’t ask me why does it work - it’s a library so someone is just helping us ;D If you make the value 50 lower it will scroll through the section slower. If it’s higher it will scroll faster. I have found 50 to be the perfect value.


TL;DR

Ok... enough `:)` Here is the entire script in case someone didn't want to read my script-part tutorial.
<script src="https://css-tricks.com/examples/HorzScrolling/jquery.mousewheel.js"></script>
<script>
    $(function() {
        overallwidth = 0;
        $('.div-600px').each(function() {
            overallwidth = overallwidth + $(this).width() + parseInt($(this).css('padding-left')) + parseInt($(this).css('padding-right')) + parseInt($(this).css('margin-left')) + parseInt($(this).css('margin-right'));
        });
        $('.page-wrap').css('width', overallwidth);
    });
    $('.ninja-tricks').mousewheel(function(event, delta) {
    	this.scrollLeft -= (delta * 50);
    	event.preventDefault();
    });
</script>

Link: Click
Preview: Click

You’re welcome :)

By the way I’m hosting Q&A Live! Session soon. You can sign up and register your Webflow and Scripting related questions at my website: https://www.barts.work.

Have a good day!

4 Likes

Does this code still work? If tried it several times and checked everything twice - it still doesn’t work :slight_smile: any hints?

1 Like

Hi @bartekkustra This is great, but the mobile versions (tablet/smartphone) are not working for me… was there an update to any of the code that is not in the above post?

Thanks
D

Hi, this is a great! Is there a way to make the scroll interaction work when elements come into view from right to left? At the moment the scroll trigger only works in a vertical type design.
Thanks
J