How to achieve horizontal scroll with css?-CodePudding

I Want to do a website with horizontal scroll, but i cant scroll to the right because it keeps scrolling to the bottom. The code seems to be fine, but i can't make it work.

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
}
  .app-container {
    width: 100%;
    height: 100%;
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    display: flex;
    }

    section {
      flex: none;
      width: 100vw;
      height: 100vh;
      scroll-snap-align: start;
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./dist/css/main.min.css" type="text/css">
    <title>Document</title>
</head>
<body>
    <div >
        <section><h1>page 1</h1></section>
        <section><h1>page 2</h1></section>
        <section><h1>page 3</h1></section>
        <section><h1>page 4</h1></section>
      </div>
</body>
</html>

CodePudding user response：

You can do this with a tiny bit of JavaScript. I adjusted some of your CSS properties for this.

Check this out...

const scrollContainer = document.querySelector(".app-container");

scrollContainer.addEventListener("wheel", (evt) => {
    evt.preventDefault();
    scrollContainer.scrollLeft  = evt.deltaY;
});

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  font-family: sans-serif;  
}
.app-container {
  overflow-x: hidden;
  display: flex;  
}

section {
  flex: none;
  width: 100vw;
  height: 100vh;
  scroll-snap-align: start;
}

<div >
  <section>
    <h1>page 1</h1>
  </section>
  <section>
    <h1>page 2</h1>
  </section>
  <section>
    <h1>page 3</h1>
  </section>
  <section>
    <h1>page 4</h1>
  </section>
</div>

You can also mix scroll types, which is not difficult at all. I've changed some of your CSS properties to allow the scrollable elements to be fully visible.

const scrollContainer = document.querySelector(".app-container");

scrollContainer.addEventListener("wheel", (evt) => {
    evt.preventDefault();
    scrollContainer.scrollLeft  = evt.deltaY;
});

/* removes scrollbar */
::-webkit-scrollbar {
  display: none;
}
body {
  margin: 0;
  font-family: sans-serif;  
}

.app-container {
  overflow-x: hidden;
  display: flex; 
  position: sticky;
  top: 0;  
  z-index: 1000;
}

section {
  flex: none;
  width: 100vw;
  height: 50vh;
  scroll-snap-align: start;
}

<div >
  <section>
    <h1>page 1</h1>
  </section>
  <section>
    <h1>page 2</h1>
  </section>
  <section>
    <h1>page 3</h1>
  </section>
  <section>
    <h1>page 4</h1>
  </section>
</div>

<section>
  <h2>Traditional Scrolling</h2>
  <article>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates qui, hic, amet consectetur aperiam commodi, ratione beatae dolor mollitia odio aut quos porro? Quam reprehenderit rerum vero dolores aut facere, harum quisquam atque quod maiores, repudiandae unde doloribus expedita ex. Eaque minima repellendus blanditiis asperiores quo quod et quis magnam.</p>
    <p>Blanditiis ea, odit dolorum dignissimos ipsam laboriosam sapiente magni consequuntur vitae vel perspiciatis distinctio architecto. Ratione dolore fugit magni illo ullam impedit? Id adipisci, voluptatum harum nostrum similique aliquam impedit. Quidem a qui cupiditate, vel aut, eveniet reprehenderit nihil, animi totam harum porro exercitationem magni corrupti dolores iusto vitae. Ullam.</p>
    <p>Officia sed eaque maxime perspiciatis obcaecati optio excepturi necessitatibus, magni ex ad iure quia eum pariatur culpa expedita repellendus qui quisquam quam in reprehenderit iste laboriosam architecto quae quos. Minus libero consectetur quidem eligendi accusantium totam laudantium aliquid eos nulla molestias, itaque voluptatum. Sit, magni similique! Accusantium inventore sequi illum!</p>
    <p>Nostrum, accusantium praesentium eligendi ea mollitia optio deserunt obcaecati blanditiis quam veritatis recusandae, in rem minus adipisci vitae similique. Laborum similique est inventore debitis totam facilis nostrum, iusto labore sit adipisci impedit placeat voluptatibus veritatis beatae. Dignissimos corporis enim architecto ut, labore optio quas incidunt nostrum quod id temporibus praesentium.</p>
    <p>Quos fuga dolorum quasi similique dolore dolor beatae labore officia autem sequi qui reiciendis quis iste, maiores et doloremque vero dolores temporibus possimus? Id repellendus amet reprehenderit dolore perferendis pariatur incidunt inventore delectus praesentium, quam cupiditate dicta maxime at mollitia eum. Nam molestiae, aliquid suscipit nulla doloribus provident veritatis consectetur!</p>
    <p>Dolorum cumque quam, adipisci necessitatibus repellat repellendus ex facere! Odio cumque magni voluptas optio hic at, repudiandae, nam temporibus id possimus accusamus explicabo amet, repellendus quisquam ducimus nihil facere error! Quos magnam non id quisquam eos aliquam aut dignissimos voluptatibus, voluptates odit minima nostrum, ab, perferendis similique optio perspiciatis ut!</p>
    <p>Distinctio incidunt, nobis ratione saepe aliquam placeat quos blanditiis consequuntur aperiam repellendus libero aspernatur nisi repellat assumenda eligendi? Maiores, provident? Distinctio deserunt itaque, exercitationem necessitatibus perferendis nam minus aspernatur magnam. Alias natus atque, laboriosam cupiditate deleniti placeat magnam ipsum fuga error culpa quasi rerum modi consequuntur, illo quibusdam nobis voluptate!</p>
    <p>Repellendus voluptas, aliquam adipisci esse ipsam vel dolor illum vitae fugit dolorum. Voluptatem, obcaecati, et reprehenderit id mollitia voluptatibus necessitatibus fugit, sequi vero nihil nesciunt aliquid iure deserunt doloribus cumque fuga! Accusantium exercitationem voluptatibus obcaecati quos ratione. Obcaecati aperiam numquam iure. Quod obcaecati explicabo quam veritatis molestiae soluta dignissimos reprehenderit?</p>
    <p>Quibusdam maxime, commodi hic voluptas suscipit ipsam praesentium magni sint, culpa aperiam corrupti voluptate doloribus in magnam ut asperiores. Eum, nemo ea quas assumenda quae illo libero architecto distinctio ab quisquam in incidunt, qui asperiores optio facere. Beatae, nulla rem natus ut suscipit quae. Accusantium deleniti sint rem temporibus illum?</p>
    <p>Atque sit possimus at numquam accusantium fugiat illum delectus, velit minus libero accusamus dicta maiores voluptates doloribus error reiciendis esse. Provident totam odio, eum voluptate fuga, sint, nihil deleniti hic minima nisi quam rem tenetur. Corporis odio non incidunt magni ratione dicta fuga, deleniti recusandae, nulla atque velit aliquam est.</p>
  </article>    
</section>

CodePudding user response：

try to hold the shift key when scrolling