Question 175051 in Html Question posted in
Some basic documentation can be found here.

How can I rewrite this?

I have to make a website for school, and I tried to implement horizontal scrolling with snap-align in CSS. The problem is that when I scroll down, nothing happens, but (on a laptop’s touchpad), when I scroll rightward, it works. And since I am relatively new to web development, I used this tutorial for the snap-align mechanic: https://youtu.be/pNPkVQD7vlM. Furthermore, I found out that there is a method with Javascript with which I am not familiar at all.

    *{
    margin: 0;
}
body {
    width: 100vw;
    height: 100vh;
}
.index_wrapper{
    width: 100%;
    height: 100%;
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
}
.index_wrapper section{ 
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;    
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
}
.index_wrapper::-webkit-scrollbar {
    display: none;
}
    <!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Horizontal Scrolling</title>
        <link rel="stylesheet" href="test.css">
    </head>
    <body>
        <div class="index_wrapper">
            <section>
                <h1>Startpage</h1>
            </section>
            <section>
                <h1>Section 1</h1>
            </section>
            <section>
                <h1>Section 2</h1>
            </section>
            <section>
                <h1>Section 3</h1>  
            </section>  
        </div>
    </body>
</html>

I visited many websites and watched several videos, but nothing worked. I would like to mention that this is my first time using StackOverflow, so let me know if you need something or have some tips for me. Hopefully you can solve my issue!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Yes, I finally found the answer myself with the of help from Naser Owaimer; I used his script but it didn't work because when you make your constant ( unchangeable variable) in  JavaScript, you need to write the correct name of your scroll container. What you should keep in mind as well, is that if you want to make it work on a laptop, simply delete „evt.preventDefault",which just disables the basic function of something (in my case scrolling).

    html:

        <!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Horizontal Scrolling</title>
        <link rel="stylesheet" href="test.css">
    </head>
    <body>
        <div class="index_wrapper">
            <section>
                <h1>Startpage</h1>
            </section>
            <section>
                <h1>Section 1</h1>
            </section>
            <section>
                <h1>Section 2</h1>
            </section>
            <section>
                <h1>Section 3</h1>  
            </section>  
        </div>
          <script>
              alert("Javascript works (delete this line in your editor)")
               let scrollSpeed = 10;
               const index_wrapper = document.querySelector(".index_wrapper");
               index_wrapper.addEventListener("wheel", (evt) => {
               index_wrapper.scrollLeft +=  (evt.deltaY+evt.deltaX)*scrollSpeed;
               });
         </script>  
    </body>
</html>

    CSS:

        *{
    margin: 0;
}
body {
    width: 100vw;
    height: 100vh;
}
.index_wrapper{
    width: 100%;
    height: 100%;
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
    scroll-behavior: smooth;
}
.index_wrapper section{ 
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;    
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
}
.index_wrapper::-webkit-scrollbar {
    display: none;
}

  2. 0

    Ok, the problem happen because PCs not made for horizontal websites. also this feature in css made basically for touchable devices. But I have a few solutions:

    Using javascript:

    Use this Javascript by adding it before </body>

        <script>
         let scrollSpeed = 500;

         const index_wrapper = document.querySelector(".index_wrapper_div");
         index_wrapper.addEventListener("wheel", (evt) => {
         evt.preventDefault();
         index_wrapper.scrollLeft +=  (evt.deltaY+evt.deltaX)*scrollSpeed;
         });
    </script>

    Then add this css in .index_wrapper style:

      scroll-behavior: smooth;

    If the scrolling fast you can change number in this variable:

                  let scrollSpeed = 500;

    You can get more information:

    Without Javascript

    • First solution, you can ask website visitors to hold shift when scrolling. in most devices its working for horizontal scrolling.

    • Second solution, convert the website from horizontal to vertical by changing scroll-snap-type to y.

    • Third solution, Make scroll bar visible by removing mandatory from scroll-snap-type and remove:

       .index_wrapper::-webkit-scrollbar{
    display: none;
 }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search